<template>
  <!--日历 -->
  <div class="container">
    <!-- {{ operate_log_data }} -->
    <!-- 展示房间价格时（isShowRoomPrice==true）使用 tableData[]的数据，并且使用 objectSpanMethod合并表格的 方法
         展示库存时（！isShowRoomPrice==true）使用 stockTableData[]的数据，并且不需要合并表格的 方法
     -->
    <!-- :max-height=maxHeight -->
    <el-table class="table" style="width: 100%;" :max-height="tableMaxHeight"
      :data="isShowRoomPrice && isScreen == false ? tableData : !isShowRoomPrice && isScreen == false ? stockTableData : screenTableData"
      :span-method="isShowRoomPrice ? objectSpanMethod : ''" :header-cell-style="{ background: 'white' }" :key="tablekey">
      <!-- max-height="780" -->
      <!-- max-height="calc(100% - 150px)" -->

      <el-table-column align="center">
        <template slot="header">
          <div style="padding: 8px 0;">
            <div class="table_date">
              <el-date-picker placeholder="选择日期" v-model="nowTime" size="small" style="width:125px;border: none;"
                :default-value="new Date()" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type=date>
              </el-date-picker>
              <div class="table_date_today" @click="nowTime = formatDate(new Date())">今</div>
            </div>
            <div class="table_date_show">
              <span @click="select_TodayTime(0)"><i class="el-icon-arrow-left"></i></span>
              <div>{{ handleDate(this.startTime, true) }} - {{ handleDate(this.endTime, true) }}</div>
              <span @click="select_TodayTime(1)"><i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </template>
        <el-table-column prop="title" align="center" width="150">
          <template slot="header">
            <span class="screen_title" @click="isShow_screen_drawer = true">
              筛选
              <span class="iconfont icon-shaixuan" style="font-size: 16px;"></span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="房间号" width="95" align="center">
          <template slot="header">
            <div @click="handleShowRoomPrice" style="line-height: 35px;">
              <span class="screen_title">
                {{ isShowRoomPrice ? '收起' : '展示' }}
                <i :style="{ transform: ' rotate(' + (isShowRoomPrice ? -180 : 0) + 'deg)' }"
                  class="el-icon-arrow-down"></i>
              </span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-if="isShowRoomPrice" class="column_room_num" @click="change_dirty_clean(scope.row.room.id)"
              @mouseenter="handleMouseEnter_cleanRoom(scope.row)" @mouseleave="handleMouseLeave_cleanRoom(scope.row)">
              <!-- 净房只显示房间号 -->
              <div v-show="scope.row.room.is_need_clean == 0">
                <div v-show="scope.row.isShowRoomClean_dirty == false">{{ scope.row.room.room_num }}</div>
                <div v-show="scope.row.isShowRoomClean_dirty">转为脏房</div>
              </div>
              <!-- 脏房显示背景颜色，以及扫把图标 -->
              <div class="column_room_num_dirty" v-show="scope.row.room.is_need_clean == 1">
                <div v-show="scope.row.isShowRoomClean_dirty == false">
                  {{ scope.row.room.room_num }}
                  <span class="iconfont icon-saoba"></span>
                </div>
                <div v-show="scope.row.isShowRoomClean_dirty">转为净房</div>
              </div>
            </div>
            <div v-if="!isShowRoomPrice" class="column_room_num">
              剩余
            </div>
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 房间日期价格部分 显示数据和操作部分-->
      <el-table-column width="120" v-for="( item, index ) in  dateArr " :key="index" align="center">
        <template slot="header">
          <div style="font-weight: 500; color: black;">
            <div :style="{ 'color': formatDate(new Date()) == item ? '#1989FA' : '' }">
              <span style="margin-right: 5px;">{{ formatDate(new Date()) == item ? '今天' : handleDate(item) }}</span>
              {{ handlweek(item) }}
            </div>
          </div>
        </template>
        <el-table-column width="120" align="center">
          <template slot="header">
            <div style="font-weight: 500;">
              剩
              <span v-if="stockData.total">{{ stockData.total[item] }}</span>
              <span v-else>-</span>
              间
            </div>
          </template>
          <template slot-scope="{row}">
            <div v-if="!isLoding && row.room_dates && isShowRoomPrice" class="column_room_info">
              <!-- 房间状态 0正常 1停用房 2维修房 3保留房 4手动锁房 5自动锁房 6已预定 7已入住 8已退房 9已取消-->

              <!-- 显示房间信息 -->
              <div v-show="row.room_dates[item].isShow_operation == false">

                <!-- 1停用房 2维修房 3保留房 -->
                <div class="column_room_operation">
                  <el-popover placement="right-start" width="65" trigger="hover" :append-to-body="false">
                    <div class="column_room_operation_popover_content">
                      <!--1当日转预订时，显示直接入住的按钮==根据row.room_dates[item].diff_today判断
                         2显示操作房间，调用方法@click="click_room_info(row, item)" -->
                      <div v-if="row.room_dates[item].diff_today == 0 || row.room_dates[item].diff_today == 1"
                        @click="reschedule(row, item)">转预订</div>
                      <div @click="open_room(row.room.id, item)">开房</div>
                      <div @click="cancell_table_cell_popover">取消</div>
                    </div>
                    <div slot="reference">
                      <div class="room_info_icon"
                        v-if="row.room_dates[item].room_info.status == 1 || row.room_dates[item].room_info.status == 2 || row.room_dates[item].room_info.status == 3">
                        <div>
                          <div
                            :class="{ 'el-icon-remove': row.room_dates[item].room_info.status == 1, 'iconfont icon-banshou': row.room_dates[item].room_info.status == 2, 'iconfont icon-s-claim': row.room_dates[item].room_info.status == 3 }"
                            :style="{ 'font-size': row.room_dates[item].room_info.status === 1 ? '18px' : row.room_dates[item].room_info.status === 2 ? '21px' : row.room_dates[item].room_info.status === 3 ? '22px' : '' }">
                          </div>
                          <div>
                            {{ row.room_dates[item].room_info.status == 1 ? '停用房' :
                              row.room_dates[item].room_info.status
                                == 2 ? '维修房' : row.room_dates[item].room_info.status == 3 ? '保留房' : '' }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-popover>
                </div>

                <!-- 有订单的房间 -->
                <el-popover :visible-arrow="false" placement="right-start" width="280" trigger="hover"
                  :append-to-body="false" class="table_has_order_popover">
                  <div class="table_has_order_conten" v-if="row.room_dates[item].room_info.order_info">
                    <div class="table_has_order_conten_frist">
                      <div>
                        <span>姓名： {{ row.room_dates[item].room_info.order_info.name }}</span>
                        <span>{{ row.room_dates[item].room_info.order_info.phone }}</span>
                        <span class="detail_basic_Info_status" :style="{
                          backgroundColor: row.room_dates[item].room_info.status == 6 ? '#FED4B3' : row.room_dates[item].room_info.status == 7 ? '#C2EBFF' : row.room_dates[item].room_info.status == 8 ? '#CCCCCC' : 'red',
                          fontSize: '12px', color: 'white', padding: '0 5px'
                        }">
                          {{ row.room_dates[item].room_info.order_info.status_text }}
                        </span>
                      </div>
                      <div>
                        <span>时间： {{ row.room_dates[item].room_info.order_info.start_date.slice(5) }}入住</span> |
                        <span>{{ row.room_dates[item].room_info.order_info.end_date.slice(5) }}离店</span> |
                        <span>共{{ row.room_dates[item].room_info.order_info.day }}晚</span>
                      </div>
                      <div>
                        来源： <span style="color:#0486FE">{{ row.room_dates[item].room_info.order_info.channel }}</span>
                      </div>
                    </div>
                    <div class="table_has_order_conten_second">
                      <div>订单总额：￥ {{ row.room_dates[item].room_info.order_info.order_price }}</div>
                      <div>已收款：￥ {{ row.room_dates[item].room_info.order_info.has_pay_price }}</div>
                    </div>
                    <div class="table_has_order_conten_third">
                      备注：
                      <p>
                        {{ row.room_dates[item].room_info.order_info.remarks ?
                          row.room_dates[item].room_info.order_info.remarks : '无' }}
                      </p>
                    </div>
                  </div>
                  <div slot="reference">
                    <!-- 有订单的房间 -->
                    <div @click="table_has_order_room(row.room_dates[item])">
                      <!-- checkout_status -1欠款 0正常 1多收 -->
                      <!-- diff_today -1今天之前 0今天，1今天之后 -->
                      <!-- 只有一天的订单==不需要跨列 判断条件：当状态为预订/已入住/退房订单时，并且订单天数只有一天 -->
                      <!-- 6已预定 7已入住 8已退房 -->
                      <div class="table_hasOrder_cell"
                        :style="{ backgroundColor: row.room_dates[item].room_info.status == 6 ? '#FED4B3' : row.room_dates[item].room_info.status == 7 ? '#C2EBFF' : row.room_dates[item].room_info.status == 8 ? '#CCCCCC' : '', height: '48px', }"
                        v-if="row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 6 && row.room_dates[item].room_info.order_info.day == 1
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 7 && row.room_dates[item].room_info.order_info.day == 1
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 8 && row.room_dates[item].room_info.order_info.day == 1
                          ">
                        <div class="table_hasOrder_cell_one">
                          <div>
                            <div class="tabel_channel_show_name">{{ row.room_dates[item].room_info.order_info.name }}
                            </div>
                            <div class="tabel_channel_show">
                              {{ row.room_dates[item].room_info.order_info.channel }}
                            </div>
                          </div>
                          <div class="table_hasOrder_cell_right"
                            :style="{ backgroundColor: row.room_dates[item].room_info.order_info.is_hour_room == 1 ? '#02CF9E' : '#F56C6C' }"
                            v-if="row.room_dates[item].room_info.order_info.checkout_status != 0">
                            {{ row.room_dates[item].room_info.order_info.is_hour_room == 1 ? '钟' :
                              row.room_dates[item].room_info.order_info.is_hour_room == 0
                                && row.room_dates[item].room_info.order_info.checkout_status == '-1' ? '欠' : '￥' }}
                          </div>
                        </div>
                      </div>

                      <!-- 多天订单==需要跨列  判断条件：当状态为预订/已入住/退房订单时，并且订单天数大于1，且需要当前日期是订单开始的日期 -->
                      <div class="table_hasOrder_cell"
                        v-else-if="row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 6 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date == item
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 7 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date == item
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 8 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date == item"
                        :style="{
                          backgroundColor: row.room_dates[item].room_info.status == 6 ? '#FED4B3' : row.room_dates[item].room_info.status == 7 ? '#C2EBFF' : row.room_dates[item].room_info.status == 8 ? '#CCCCCC' : '',
                          width: `${row.room_dates[item].room_info.order_info.day * 120 - 20}px`, position: 'absolute', height: '48px', zIndex: 100,
                        }">

                        <!-- width: `${row.room_dates[item].room_info.order_info.day * 120 - 20}px` -->
                        <!--  变量day---订单天数， 120--单元格宽度  20---左右边距的长度  -->
                        <div class="table_hasOrder_cell_one">
                          <div>
                            <div class="tabel_channel_show_name">{{ row.room_dates[item].room_info.order_info.name }}
                            </div>
                            <div class="tabel_channel_show">
                              {{ row.room_dates[item].room_info.order_info.channel }}
                            </div>
                          </div>
                          <div class="table_hasOrder_cell_right"
                            v-if="row.room_dates[item].room_info.order_info.checkout_status != 0">
                            {{ row.room_dates[item].room_info.order_info.checkout_status == '-1' ? '欠' : '￥' }}
                          </div>
                        </div>
                      </div>

                      <!-- 多天订单==需要跨列  判断条件：并且订单天数大于1，订单开始 日期已经不显示再表格中时 -->
                      <div class="table_hasOrder_cell"
                        v-else-if="row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.ispass_startDate && row.room_dates[item].room_info.order_info.after_start_date == item"
                        :style="{
                          backgroundColor: row.room_dates[item].room_info.status == 6 ? '#FED4B3' : row.room_dates[item].room_info.status == 7 ? '#C2EBFF' : row.room_dates[item].room_info.status == 8 ? '#CCCCCC' : '',
                          width: `${row.room_dates[item].room_info.order_info.residue_days * 120 - 20}px`, position: 'absolute', height: '48px', zIndex: 100,
                        }">
                        <div class="table_hasOrder_cell_one">
                          <div>
                            <div class="tabel_channel_show_name">{{ row.room_dates[item].room_info.order_info.name }}
                            </div>
                            <div class="tabel_channel_show">
                              {{ row.room_dates[item].room_info.order_info.channel }}
                            </div>
                          </div>
                          <div class="table_hasOrder_cell_right"
                            v-if="row.room_dates[item].room_info.order_info.checkout_status != 0">
                            {{ row.room_dates[item].room_info.order_info.checkout_status == '-1' ? '欠' : '￥' }}
                          </div>
                        </div>
                      </div>

                      <!-- 多天订单  当前日期不是订单开始的日期 ====订单预览 -->
                      <div class="table_hasOrder_cell"
                        style="z-index:101;position:absolute;background-color: transparent;width:100px;height:50px"
                        v-else-if="row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 6 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date != item
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 7 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date != item
                          || row.room_dates[item].room_info.has_order && row.room_dates[item].room_info.status == 8 && row.room_dates[item].room_info.order_info.day != 1 && row.room_dates[item].room_info.order_info.start_date != item">
                      </div>
                      <!-- <div v-else>
                        <div v-if="row.room_dates[item].room_info.has_order">房间</div>
                      </div> -->

                    </div>
                  </div>
                </el-popover>


                <!-- @click="click_room_info(row, item)" -->
                <!--0正常 -->
                <div v-if="row.room_dates[item].room_info.status != 1 && row.room_dates[item].room_info.status != 2 && row.room_dates[item].room_info.status != 3
                  && row.room_dates[item].room_info.status != 6 && row.room_dates[item].room_info.status != 7 && row.room_dates[item].room_info.status != 8
                  || row.room_dates[item].room_info.has_order == false
                  " style="line-height: 48px;" @click="click_room_info(row, item)">
                  ￥{{ row.room_dates[item] ? parseInt(row.room_dates[item].sales_price) : '-' }}

                </div>


                <!-- <div>123123 {{row.room_dates[item].room_info.status}}</div> -->

              </div>
              <!--ＥＮＤ 显示房间信息 -->

              <!-- 显示操作房间 -->
              <div v-show="row.room_dates[item].isShow_operation" class="column_room_operation"
                @click="click_room_info(row, item)">
                <!-- trigger="hover" -->
                <el-popover placement="right-start" width="65" trigger="hover" :append-to-body="false">
                  <div class="column_room_operation_popover_content">
                    <div v-if="row.room_dates[item].diff_today == 0 || row.room_dates[item].diff_today == 1"
                      @click="openDrawer(1)">预订</div>
                    <div v-if="row.room_dates[item].diff_today == 0" @click="openDrawer(2)">入住</div>
                    <div v-if="row.room_dates[item].diff_today == -1" @click="openDrawer(3)">补录</div>
                    <div @click="open_close_room(row.room.id, item)">关房</div>
                    <div @click="cancell_table_cell_popover">取消</div>
                  </div>
                  <div slot="reference">
                    <i class="el-icon-check"></i>
                  </div>
                </el-popover>
              </div>
              <!-- ＥＮＤ　显示操作房间 -->
            </div>

            <!-- 显示数量 -->
            <div v-else-if="!isLoding && row.stock && isShowRoomPrice == false">{{ row.stock[item] }} 间</div>

            <!-- 没有数据时显示 -->
            <div v-else-if="isLoding || !row.room_dates && isShowRoomPrice || !row.stock && isShowRoomPrice == false">-
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- 筛选房型抽屉 -->
    <div class="screen_drawer">
      <el-drawer title="房型筛选" :visible.sync="isShow_screen_drawer" size="500px" :modal="false">
        <div class="screen_drawer_content">
          <div style="margin-bottom: 10px;">
            <el-checkbox v-model="checkAll_screen" @change="handleCheckAllChange">全选</el-checkbox>
          </div>
          <el-checkbox-group v-model="checked_room_screen" @change="handleCheckedCitiesChange">
            <div style="width: 100%;margin:5px 20px;" v-for=" item  in  screen_room_checkbox " :key="item.id">
              <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>

        <!-- 底部 -->
        <div class="drawer_bottom">
          <div class="drawer_bottom_btn">
            <el-button size="small" @click="isShow_screen_drawer = false">取消</el-button>
            <el-button type="primary" size="small" @click="submit_screen">确定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>

    <!-- 关房对话框 -->
    <div>
      <el-dialog title="关房" :visible.sync="close_room_dialog" width="530px">
        <!-- ref="close_room_Form" :rules="close_room_rules"  -->
        <el-form :model="close_room_data" label-width="70px" label-position="right">
          <el-form-item label="关房类型">
            <el-radio-group v-model="close_room_data.type" style="margin-top: -2px;">
              <el-radio :label="1">停用房</el-radio>
              <el-radio :label="2">维修房</el-radio>
              <el-radio :label="3">保留房</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" resize="none" :autosize='{ minRows: 6 }' v-model="close_room_data.remarks"
              maxlength="2048" show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close_room_dialog = false">取 消</el-button>
          <el-button type="primary" @click="submit_close_room">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <!-- 订单抽屉 -->
    <div class="drawer">
      <el-drawer destroyOnClose :visible.sync="isShow_drawer" size="500px" :modal="false" :wrapperClosable="false"
        :close-on-press-escape="false">
        <div slot="title">
          <div class="drawer_order_title" v-show="fill_order_title_show == 1">
            <div :class="{ 'selectTitle': select_room == 0 }" @click="change_select_room">全日房</div>
            <div :class="{ 'selectTitle': select_room == 1 }" @click="change_select_room">钟点房</div>
          </div>
          <div v-show="fill_order_title_show == 2" class="titleSlot" style="padding-bottom: 10px;">
            <div class="titleIcon" @click="back">
              <i class="el-icon-back"></i>返回
            </div>
            <span>{{ fill_order_title }}</span>
          </div>
        </div>

        <div class="drawer_order_content">
          <!-- 基本信息 -->
          <div class="drawer_order_content_box">
            <div class="drawer_order_content_box_title">基本信息</div>
            <div class="drawer_order_content_box_content basic_info">
              <div class="drawer_order_content_row basic_info_border"
                :style="{ borderColor: drawer_basic_data.nameTrue == false ? 'red' : 'transparent', }">
                <span>姓名</span>
                <el-input v-model="drawer_basic_data.name" style="width: 150px" size="small"
                  placeholder="请输入姓名"></el-input>
              </div>
              <div class="drawer_order_content_row basic_info_border"
                :style="{ borderColor: drawer_basic_data.phoneTrue == false ? 'red' : 'transparent', }">
                <span>手机</span>
                <el-input v-model="drawer_basic_data.phone" style="width: 150px" size="small"
                  placeholder="请输入手机号"></el-input>
              </div>
              <div class="drawer_order_content_row basic_info_border"
                :style="{ borderColor: drawer_basic_data.channelTrue == false ? 'red' : 'transparent', }">
                <span>渠道</span>
                <div class="selected_channel">
                  <el-select v-model="drawer_basic_data.channel" size="small" style="width: 150px;height: 32px;">
                    <el-option v-for=" item  in  channelOptions " :key="item.channel_id" :label="item.name"
                      :value="item.channel_id">
                      <div class="custom_select">
                        <div :style="item.color"></div>
                        <span>{{ item.name }}</span>
                      </div>
                    </el-option>
                    <div slot="prefix">
                      <div class="selected_channel_color" :style="selected_channel.color"></div>
                    </div>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <!-- 房间信息 -->
          <div class="drawer_order_content_box">
            <div class="drawer_order_content_box_title room_title">
              <span>房间信息</span>
              <span>共{{ drawer_room_data.length }}间房</span>
            </div>
            <div class="drawer_order_content_box_content room_info">
              <!-- 填写房间信息 -->
              <!-- select_room == 0 ? drawer_room_data : hour_room_data  -->
              <div v-for="( item, index ) in   drawer_room_data " :key="index">
                <div class="drawer_order_content_row info_flex">
                  <div class="row_input" :style="{ borderColor: item.isTrue == false ? 'red' : '#DCDFE6', }">
                    <!-- 日期选择器 -->
                    <div class="row_input_date_picke">
                      <el-date-picker v-show="select_room == 0" @change="room_info_Change(item)" v-model="item.date"
                        size="small" style="width:125px;" :default-value="item.date" value-format="yyyy-MM-dd"
                        format="MM-dd" type="date">
                      </el-date-picker>

                      <el-date-picker v-show="select_room == 1" v-model="item.date" format="MM-dd HH:mm:ss"
                        type="datetime" style="width:125px;" size="small" default-time="00:00:00">
                      </el-date-picker>
                      <div class="row_input_date_picke_text">
                        入住
                        <i :class="select_room == 0 ? 'el-icon-date' : 'el-icon-time'"></i>
                      </div>
                    </div>
                    <!-- 数量 -->
                    <el-popover class="row_input_nums" placement="top-start" title="" width="150" trigger="click">
                      <div>
                        <el-input-number @change="room_info_Change(item)" v-model="item.days" :min="1"
                          :max="select_room == 0 ? Infinity : 24" size="small"></el-input-number>
                      </div>
                      <div slot="reference">
                        {{ item.days ? item.days : '--' }}{{ select_room == 0 ? '晚' : '小时' }}
                      </div>
                    </el-popover>
                    <!-- 级联选择器 -->
                    <div class="row_input_select">
                      <el-cascader @change="room_info_Change(item)"
                        :options="select_room == 1 ? item.room_options : roomOptions" v-model="item.room_id" filterable
                        :props="{ emitPath: false, checkStrictly: false, }" show-all-levels>
                      </el-cascader>
                    </div>
                    <!-- 价格 -->
                    <div class="row_input_price">
                      <el-input v-model="item.price" size="small">
                        <span slot="prefix" style="color: black;">￥</span>
                      </el-input>
                    </div>
                  </div>
                  <!-- 填写入住人信息 -->
                  <div class="info_flex_center">
                    <el-button type="text" @click="occupant(item, index, 'order')">入住人</el-button>
                  </div>
                  <!-- 删除 -->
                  <div>
                    <el-button @click="deleteData(index, drawer_room_data, 'drawer_room_data')"
                      :class="item.order_room_id ? '' : 'show_reminder_icon'" type="text"
                      :disabled="item.is_has_order_room" size="mini">
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </div>
                </div>

                <!-- 钟点房显示的时间 -->
                <div style="font-size: 11px;margin-top: 5px;margin-left: 10px;" v-show="select_room == 1">
                  <span>
                    {{ formatDate(new Date(item.date), 2) }}
                    至
                    {{ countHours(new Date(item.date), item.days) }}
                  </span>
                </div>
              </div>
              <!-- 添加房间信息 -->
              <div class="drawer_order_content_row">
                <el-button size="small" plain class="addBtn" style="border: 1px solid #409EFF;padding:10px"
                  @click="addroom">
                  <i class="el-icon-plus"> 添加房间</i>
                </el-button>
              </div>
            </div>
          </div>
          <!-- 消费信息 -->
          <div class="drawer_order_content_box">
            <div class="drawer_order_content_box_title ">消费信息</div>
            <div class="drawer_order_content_box_content">
              <!-- 填写消费信息 -->
              <div class="drawer_order_content_row info_flex" v-for="( item, index ) in  drawer_consumption_data "
                :key="item.id">
                <div class="row_input row_short_input"
                  :style="{ borderColor: item.isTrue == false ? 'red' : '#DCDFE6', }">
                  <!-- 日期选择器 -->
                  <div class="row_input_date_picke">
                    <el-date-picker placeholder="选择日期" v-model="item.date" size="small" style="width:125px;border: none;"
                      :default-value="item.date" value-format="yyyy-MM-dd" format="MM-dd" type=date>
                    </el-date-picker>
                    <div class="row_input_date_picke_text">
                      <i class="el-icon-date"></i>
                    </div>
                  </div>
                  <!-- 数量 -->
                  <el-popover class="row_input_nums" placement="top-start" title="" width="150" trigger="click">
                    <div>
                      <el-input-number @change="consum_info_Change(item)" v-model="item.num" :min="1"
                        size="small"></el-input-number>
                    </div>
                    <div slot="reference"><span>{{ item.num ? item.num : '--' }}</span> 份</div>
                  </el-popover>
                  <!-- 选择器 -->
                  <div class="row_input_select">
                    <el-select v-model="item.consum_item.id" placeholder="请选择消费项目" @change="consum_info_Change(item)">
                      <el-option v-for="( items, consumindex ) in  consumeOptions "
                        :key="`items.id+${items.id}+${consumindex}`" :label="items.name" :value="items.id"
                        :disabled="!items.status">
                      </el-option>
                    </el-select>
                  </div>
                  <!-- 价格 -->
                  <div class="row_input_price">
                    <el-input v-model="item.total_price" size="small">
                      <span slot="prefix" style="color: black;">￥</span>
                    </el-input>
                  </div>
                </div>
                <div class="info_flex_center">
                  <el-popover placement="top-start" title="" width="300" trigger="click">
                    <div>
                      <el-input type="textarea" resize="none" :autosize='{ minRows: 2 }' placeholder="备注信息"
                        v-model="item.remarks" maxlength="2048" show-word-limit>
                      </el-input>
                    </div>
                    <el-button slot="reference" type="text">备注</el-button>
                  </el-popover>
                </div>
                <!-- 删除 -->
                <div @click="deleteData(index, drawer_consumption_data)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
              <!-- 添加消费信息-->
              <div class="drawer_order_content_row">
                <el-button size="small" plain class="addBtn" @click="addConsume">
                  <i class="el-icon-plus"> 添加消费</i>
                </el-button>
              </div>

            </div>
          </div>
          <!-- 收款信息 -->
          <div class="drawer_order_content_box" v-if="fill_order_title_show != 2">
            <div class="drawer_order_content_box_title ">收款信息</div>
            <div class="drawer_order_content_box_content">
              <!-- 填写收款信息 -->
              <div class="drawer_order_content_row info_flex" v-for="( item, index ) in  drawer_collection_data "
                :key="item.id">
                <div class="row_input row_short_input"
                  :style="{ borderColor: item.isTrue == false ? 'red' : '#DCDFE6', }">
                  <!-- 日期选择器 -->
                  <div class="row_input_date_picke">
                    <el-date-picker placeholder="选择日期" v-model="item.date" size="small" style="width:125px;border: none;"
                      :default-value="new Date()" value-format="yyyy-MM-dd" format="MM-dd" type=date>
                    </el-date-picker>
                    <div class="row_input_date_picke_text">
                      <i class="el-icon-date"></i>
                    </div>
                  </div>
                  <!-- 选择器 -->
                  <div class="row_input_select type_select">
                    <!-- 请选择收款类型 -->
                    <el-select v-model="item.type" placeholder="类型">
                      <el-option v-for=" collect  in  collectOptions " :key="collect.value" :label="collect.label"
                        :value="collect.value"></el-option>
                    </el-select>
                  </div>
                  <div class="row_input_select pay_select">
                    <!-- 请选择收款方式 -->
                    <el-select v-model="item.pay_type" placeholder="收款方式">
                      <el-option v-for="  payMethod  in  payMethodOptions " :key="payMethod.value"
                        :label="payMethod.label" :value="payMethod.value"></el-option>
                    </el-select>
                  </div>
                  <!-- 价格 -->
                  <div class="row_input_price">
                    <el-input v-model="item.price" size="small">
                      <span slot="prefix" style="color: black;">￥</span>
                    </el-input>
                  </div>
                </div>
                <div class="info_flex_center">
                  <el-popover placement="top-start" title="" width="300" trigger="click">
                    <div>
                      <el-input type="textarea" resize="none" :autosize='{ minRows: 2 }' placeholder="备注信息"
                        v-model="item.remarks" maxlength="2048" show-word-limit>
                      </el-input>
                    </div>
                    <el-button slot="reference" type="text">备注</el-button>
                  </el-popover>
                </div>
                <!-- 删除 -->
                <div @click="deleteData(index, drawer_collection_data)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
              <!-- 添加收款信息-->
              <div class="drawer_order_content_row">
                <el-button plain size="small" class="addBtn" @click="addCollect">
                  <i class="el-icon-plus"> 添加收款</i>
                </el-button>
              </div>

            </div>
          </div>
          <!-- 提醒信息 -->
          <div class="drawer_order_content_box">
            <div class="drawer_order_content_box_title ">提醒信息</div>
            <div class="drawer_order_content_box_content">
              <!-- 填写提醒信息 -->
              <div class="drawer_order_content_row info_flex" v-for="( item, index ) in  drawer_reminder_data "
                :key="item.id">
                <!-- 提醒信息显示 -->
                <div class="show_reminder_info">
                  <div class="show_reminder_info_date">{{ item.reminder_time }}</div>
                  <div class="show_reminder_info_conten">{{ item.content }}</div>
                </div>

                <!-- 编辑 -->
                <div>
                  <el-button @click="addReminder(item)" type="text" :disabled="item.is_remind == 1" size="mini"><i
                      class="el-icon-edit"></i>
                  </el-button>
                </div>
                <!-- 删除 -->
                <div>
                  <el-button @click="deleteData(index, drawer_reminder_data)" type="text" :disabled="item.is_remind == 1"
                    size="mini" class="show_reminder_icon">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </div>

              </div>
              <!-- 添加提醒信息-->
              <div class="drawer_order_content_row">
                <el-button plain size="small" class="addBtn" @click="addReminder()">
                  <i class="el-icon-plus"> 添加提醒</i>
                </el-button>
              </div>

            </div>
          </div>
          <!-- 备注信息 -->
          <div class="drawer_order_content_notes">
            <el-input type="textarea" resize="none" :autosize='{ minRows: 4 }' placeholder="备注信息" v-model="remarks"
              maxlength="2048" show-word-limit>
            </el-input>
            <div class="drawer_order_content_notes_color">
              <el-color-picker size="small" v-model="remarks_color" disabled></el-color-picker>
              <span>订单特殊颜色</span>
            </div>
          </div>
          <!-- 底部 -->
          <div class="drawer_order_bottom">
            <!-- 金额展示部分 -->
            <div class="drawer_order_bottom_price">
              <div v-show="fill_order_title_show == 1"> 订单金额：<span style=" color: #0486FE;">￥{{ orderPrice ? orderPrice :
                '0.00' }}</span></div>
              <div v-show="fill_order_title_show == 2" class="drawer_order_bottom_price_detail">
                订单金额：<span style=" color: #0486FE;">￥{{ order_detail_data.order_money }}</span>
                <p>
                  已付: <span style="color: #E9AD55;">￥{{ order_detail_data.pay_money }}</span>
                  还需收款 : <span style="color: #F56C6C;">￥{{ order_detail_data.no_pay_money }}</span>
                </p>
              </div>
            </div>
            <!-- 操作按钮 -->
            <div class="drawer_order_bottom_btn">
              <el-button size="small" @click="cancell_order('outDrawer')">取消</el-button>
              <el-button type="primary" size="small" @click="submit_order(selectOperated == 2 ? 0 : 1)"
                v-show="selectOperated == 2 || selectOperated == 3">
                {{ selectOperated == 2 ? '直接入住' : '补录订单' }}
              </el-button>
              <el-button type="primary" size="small" @click="submit_order(1)"
                v-show="selectOperated == 2 || selectOperated == 1">
                提交订单
              </el-button>
              <el-button type="primary" size="small" @click="submit_order(4)" v-show="fill_order_title_show == 2">
                保存
              </el-button>
            </div>
          </div>
        </div>



        <!-- 内层嵌套的抽屉 -->
        <el-drawer destroyOnClose :append-to-body="true" class="inner_drawer" :visible.sync="innerDrawer" size="500px"
          :modal-append-to-body="false" :close-on-click-modal="false">
          <!-- 标题slot -->
          <div slot="title" class="titleSlot">
            <div class="titleIcon" @click="back">
              <i class="el-icon-back"></i>返回
            </div>
            <span>{{ innerDrawer_title }}</span>
          </div>
          <!-- 分界线 -->
          <div v-if="isShow_innerDrawer == 2" style=" border-top: 1px solid rgb(190, 189, 189);margin-top:15px"></div>

          <!-- 入住人-->
          <div v-show="isShow_innerDrawer == 1">
            <!-- 入住房间信息 -->
            <div class="checkIn_room">
              <div>
                入住时间：<span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.date.substring(5) : '--'
                }}</span>
              </div>
              <div><span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.days : '--' }}</span>晚</div>
              <div>
                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[0] : '--' }}</span> /
                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[1] : '--' }}</span>
              </div>
              <div>￥<span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.price : '--' }}</span></div>
            </div>
            <!-- 入住人信息 -->
            <div class="checkIn_person">
              <div class="checkIn_person_title">入住人姓名为必填项</div>
              <!-- 填写入住人信息 -->
              <div class="checkIn_person_info" v-for="( item, index ) in  checkIn_person_list " :key="item.id"
                :style="{ borderColor: item.isTrue == false ? 'red' : 'transparent', }">
                <div class="checkIn_person_info_input">
                  <div><el-input v-model="item.name" placeholder="客人姓名" size="small" style="width: 75px; "></el-input>
                  </div>
                  <div><el-input v-model="item.phone" placeholder="手机号码" size="small" style="width: 101px;"></el-input>
                  </div>
                  <div>
                    <el-select v-model="item.card_type" placeholder="请选择" style="width: 89px;">
                      <el-option v-for=" items  in  id_type_options " :key="items.id" :label="items.label"
                        :value="items.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div><el-input v-model="item.card_no" placeholder="证件号" size="small" style="width: 155px;"></el-input>
                  </div>
                </div>
                <!-- 删除 -->
                <div class="checkIn_person_info_delete" @click="deleteData(index, checkIn_person_list)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>

              <!-- 添加入住人 -->
              <div class="checkIn_person_info_add">
                <el-button size="small" @click="addOccupant" plain class="addBtn">
                  <i class="el-icon-plus"> 添加入住人</i>
                </el-button>
              </div>
            </div>
          </div>
          <!-- 添加提醒 -->
          <div v-show="isShow_innerDrawer == 2" class="remind_form">
            <div class="remind_form_content">
              <el-form label-position="left" ref="remindForm" :rules="remind_rules" :model="selected_remind_data"
                label-width="80px">
                <el-form-item label="活动名称" prop="reminder_time">
                  <el-date-picker v-model="selected_remind_data.reminder_time" format="yyyy-MM-dd HH:mm:ss"
                    type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="提醒内容" prop="content">
                  <el-input type="textarea" v-model="selected_remind_data.content" :autosize='{ minRows: 5 }'
                    placeholder="备注信息" maxlength="200" resize="none" show-word-limit></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 内层嵌套底部 -->
          <div class="inner_drawer_order_bottom">
            <div class="drawer_order_bottom_price"></div>
            <div class="inner_drawer_order_bottom_btn">
              <el-button size="small" @click="cancell_innerDrawer">取消</el-button>
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 1"
                @click="subOccupant(drawer_room_data, 'drawer_room_data')">确认</el-button>
              <!-- 提醒内容提交 -->
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 2"
                @click="submitForm('remindForm', 'add')">确认</el-button>
            </div>
          </div>
        </el-drawer>
      </el-drawer>

      <!-- 订单详情 -->
      <el-drawer :visible.sync="isShow_drawer_detail" size="500px" :modal="false" :wrapperClosable="false"
        :close-on-press-escape="false">
        <div slot="title" class="drawer_order_title">
          <div :class="{ 'selectTitle': select_detail == 0 }" @click=" select_detail = 0">订单详情</div>
          <div :class="{ 'selectTitle': select_detail == 1 }" @click="get_operate_log">操作日志</div>
        </div>
        <div class="drawer_order_content detail_drawer" v-show="select_detail == 0">
          <!-- 基础信息 -->
          <div class="drawer_order_content_box detail_basic_Info">
            <div>
              <div><span>{{ order_detail_data.user.name }}</span>
                <span>{{ order_detail_data.user.phone }}</span>
              </div>
              <span class="detail_basic_Info_status"
                :style="{ backgroundColor: order_status == 6 ? '#FED4B3' : order_status == 7 ? '#C2EBFF' : order_status == 8 ? '#CCCCCC' : 'red', height: '48px', }">
                {{ order_status == 6 ? '已预定' : order_status == 7 ? '进行中' : order_status == 8 ? '已完成' : '待确认' }}
              </span>
            </div>
            <div class="detail_basic_Info_channel">
              <div class="detail_basic_Info_channel_name">{{ order_detail_data.channel }}</div>
            </div>
          </div>
          <!-- 价格信息 -->
          <div class="drawer_order_content_box detail_price_Info">
            <div class="detail_price_Info_order">
              <span>订单金额</span>
              <div style="color: #0486FE;">￥{{ order_detail_data.order_money }}</div>
            </div>
            <div class="detail_price_Info_order">
              <span>已付金额</span>
              <div style="color: #E9AD55;">￥{{ order_detail_data.pay_money }}</div>
            </div>
            <div class="detail_price_Info_order">
              <span>还需付款</span>
              <div style="color: #F56C6C;">￥{{ order_detail_data.no_pay_money }}</div>
            </div>
          </div>
          <!-- 房间信息 -->
          <div class="drawer_order_content_box detail_room_Info">
            <div class="detail_room_Info_title">
              <span>房间信息 : ￥ {{ order_detail_data.room_price }}</span>
              <span>共 {{ order_detail_data.rooms.length }} 间房</span>
            </div>
            <div class="detail_room_Info_room">
              <div class="detail_room_Info_room_item" v-for="(item, index) in order_detail_data.rooms" :key="index">
                <div class="detail_room_Info_room_item_conten">
                  <div class="detail_room_Info_room_item_info">
                    <div>{{ item.room_type }} - {{ item.room_num }}</div>
                    <span>{{ item.date }}</span>
                  </div>
                  <div class="detail_room_Info_room_item_occupant" @click="occupant(item, index, 'detail')">
                    入住人<div class="num">{{ item.people_num }}</div>
                  </div>
                  <div class="detail_room_Info_room_item_price">
                    ￥ {{ item.price }}
                  </div>
                  <div class="detail_room_Info_room_item_status">
                    <span class="detail_basic_Info_status"
                      :style="{ backgroundColor: item.status == '已预定' ? '#FED4B3' : item.status == '已入住' ? '#C2EBFF' : item.status == '已退房' ? '#CCCCCC' : item.status == '已取消' ? '#CCCCCC' : '#FED4B3', height: '48px', }">
                      {{ item.status }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 其它消费 -->
          <div class="drawer_order_content_box detail_consum_Info">
            <div class="detail_consum_Info_title">
              <span>其它消费 : ￥{{ order_detail_data.consume_price }}</span>
              <span>
                <el-button type="text" size="small" @click="moreOperate(8)">
                  <i class="el-icon-plus"> 添加消费</i>
                </el-button>
              </span>
            </div>
            <div class="detail_consum_Info_table">
              <el-table :data="order_detail_data.consume_list" style="width: 100%;font-size:12px"
                :header-cell-style="{ background: '#ebeef5', lineHeight: '35px' }">
                <el-table-column label="消费项目" width="70" align="center" prop="title" />
                <el-table-column label="消费金额" width="80" align="center" prop="price" />
                <el-table-column label="消费日期" width="90" align="center" prop="date" />
                <el-table-column label="录入人" width="70" align="center" prop="admin" />
                <el-table-column label="备注" align="center" prop="remarks" />
                <el-table-column label="操作" width="50" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" style="color:red"
                      @click="handleDelete(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 收款金额 -->
          <div class="drawer_order_content_box detail_consum_Info">
            <div class="detail_consum_Info_title">
              <span>收款金额 : ￥ {{ order_detail_data.pay_money }}</span>
              <span>
                <el-button type="text" size="small" @click="moreOperate(9)">
                  <i class="el-icon-plus"> 添加收款</i>
                </el-button>
              </span>
            </div>
            <div class="detail_consum_Info_table">
              <el-table :data="order_detail_data.pay_list" style="width: 100%;font-size:12px"
                :header-cell-style="{ background: '#ebeef5', lineHeight: '35px' }">
                <el-table-column label="项目" width="70" align="center" prop="title" />
                <el-table-column label="支付方式" width="70" align="center" prop="payment" />
                <el-table-column label="金额" width="80" align="center" prop="price" />
                <el-table-column label="日期" width="90" align="center" prop="date" />
                <el-table-column label="备注" align="center" prop="remarks" />
                <el-table-column label="操作" width="50" align="center">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" style="color:red"
                      @click="handleDelete(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 订单提醒 -->
          <div class="drawer_order_content_box detail_consum_Info">
            <div class="detail_consum_Info_title">
              <span>订单提醒 : {{ order_detail_data.reminder.length }}</span>
              <span>
                <el-button type="text" size="small">
                  <i class="el-icon-plus" @click="addReminder()"> 添加提醒 </i>
                </el-button>
              </span>
            </div>
            <!-- 填写提醒信息 -->
            <div>
              <div class="drawer_order_content_row info_flex" v-for=" (item, index) in order_detail_data.reminder"
                :key="index">
                <!-- 提醒信息显示 -->
                <!-- reminder -->
                <div class="show_reminder_info">
                  <div class="show_reminder_info_date">{{ item.date }}</div>
                  <div class="show_reminder_info_conten">{{ item.content }}</div>
                </div>
                <!-- 编辑 -->
                <div>
                  <el-button @click="addReminder(item)" type="text" :disabled="item.is_remind == 1" size="mini"><i
                      class="el-icon-edit"></i>
                  </el-button>
                </div>
                <!-- 删除 -->
                <div>

                  <el-button @click="deleteReminder(item.id)" type="text" :disabled="item.is_remind == 1" size="mini"
                    class="show_reminder_icon">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 备注 -->
          <div class="drawer_order_content_box detail_remarks_Info">
            <div class="detail_remarks_Info_remarks">
              备注 :
              <div>{{ order_detail_data.remarks }}</div>
            </div>
            <div>
              订单号:{{ order_detail_data.order_no }}
              <div class="detail_remarks_Info_color">
                <span></span>订单特殊颜色
              </div>
            </div>


          </div>
          <!-- 底部 -->
          <div class="drawer_order_bottom">
            <div class="drawer_order_bottom_price">
              <el-popover class="row_input_nums" placement="top-start" title="" width="80" trigger="click">

                <div style="" class="more_operate_title">
                  <div @click="moreOperate(3)" v-if="order_status == 6">
                    取消预订
                  </div>
                  <div @click="moreOperate(6)" v-else-if="order_status == 7">
                    撤销入住
                  </div>
                  <div @click="moreOperate(7)" v-else-if="order_status == 8">
                    撤销退房
                  </div>
                  <div v-else @click="moreOperate(10)">
                    恢复预定
                  </div>
                </div>

                <div slot="reference">
                  <el-button plain size="small" class="addBtn">
                    更多操作 <i class="el-icon-caret-bottom"></i>
                  </el-button>
                </div>
              </el-popover>
            </div>
            <div class="drawer_order_bottom_btn">
              <el-button type="primary" size="small" @click="modify_Order" v-if="order_status != 8">
                修改订单
              </el-button>
              <el-button type="primary" size="small" v-if="order_status == 6" @click="moreOperate(4)">
                办理入住
              </el-button>
              <el-button type="primary" size="small" v-if="order_status == 7" @click="moreOperate(5)">
                办理退房
              </el-button>
            </div>
          </div>
        </div>


        <div v-show="select_detail == 1" class=" drawer_order_content">
          <div class="operate_log_list">
            <el-timeline>
              <!--  order_detail_data -->
              <el-timeline-item v-for="(item, index) in operate_log_data" :timestamp="item.timestamp" :key="index"
                placement="top">
                <el-card class="operate_log_list_card">
                  <p>修改为</p>
                  <div class="operate_log_list_card_frist">
                    <span>渠道：{{ order_detail_data.channel }}</span>
                    <span>预定人：{{ order_detail_data.user.name }}</span>
                    <span>手机号：{{ order_detail_data.user.phone }}</span>
                  </div>
                  <div class="operate_log_list_card_second">
                    <div> 房间： 简约双人床-209</div>
                    <div> 入住时间： 2022-10-29 120：00.22，共三晚</div>
                    <div> 房费： <span>￥ 909</span></div>
                  </div>
                  <div class="operate_log_list_card_third">
                    <div> 备注：- </div>
                    <div> 订单提醒：- </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

        <!-- 内层嵌套的抽屉 -->
        <el-drawer destroyOnClose :append-to-body="true" class="inner_drawer" :visible.sync="innerDrawer" size="500px"
          :modal-append-to-body="false" :close-on-click-modal="false">
          <!-- 标题slot -->
          <div slot="title" class="titleSlot">
            <div class="titleIcon" @click="back">
              <i class="el-icon-back"></i>返回
            </div>
            <span v-if="isShow_innerDrawer != 9">{{ innerDrawer_title }}</span>
            <div class="drawer_Collection_title" v-if="isShow_innerDrawer == 9">
              <span :class="{ 'selectTitle': cancellation_data.add_collection.is_refund == false }"
                @click="submitForm('collectionForm', 'changecollectionForm')">收款</span>
              <span :class="{ 'selectTitle': cancellation_data.add_collection.is_refund == true }"
                @click="submitForm('collectionForm', 'changecollectionForm')">退款</span>
            </div>
          </div>
          <!-- 分界线 -->
          <div v-if="isShow_innerDrawer != 1" style=" border-top: 1px solid rgb(190, 189, 189);margin-top:15px"></div>

          <!-- 入住人-->
          <div v-show="isShow_innerDrawer == 1">
            <!-- 入住房间信息 -->
            <div class="checkIn_room">
              <div>
                入住时间：<span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.date.substring(5) : '--'
                }}</span>
              </div>
              <div><span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.days : '--' }}</span>晚</div>
              <div>
                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[0] : '--' }}</span> /
                <span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.room[1] : '--' }}</span>
              </div>
              <div>￥<span>{{ selected_checkIn_person_data.date ? selected_checkIn_person_data.price : '--' }}</span></div>
            </div>
            <!-- 入住人信息 -->
            <div class="checkIn_person">
              <div class="checkIn_person_title">入住人姓名为必填项</div>
              <!-- 填写入住人信息 -->
              <div class="checkIn_person_info" v-for="( item, index ) in  checkIn_person_list " :key="item.id"
                :style="{ borderColor: item.isTrue == false ? 'red' : 'transparent', }">
                <div class="checkIn_person_info_input">
                  <div><el-input v-model="item.name" placeholder="客人姓名" size="small" style="width: 75px; "></el-input>
                  </div>
                  <div><el-input v-model="item.phone" placeholder="手机号码" size="small" style="width: 101px;"></el-input>
                  </div>
                  <div>
                    <el-select v-model="item.card_type" placeholder="请选择" style="width: 89px;">
                      <el-option v-for=" items  in  id_type_options " :key="items.id" :label="items.label"
                        :value="items.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div><el-input v-model="item.card_no" placeholder="证件号" size="small" style="width: 155px;"></el-input>
                  </div>
                </div>
                <!-- 删除 -->
                <div class="checkIn_person_info_delete" @click="deleteData(index, checkIn_person_list)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>

              <!-- 添加入住人 -->
              <div class="checkIn_person_info_add">
                <el-button size="small" @click="addOccupant" plain class="addBtn">
                  <i class="el-icon-plus"> 添加入住人</i>
                </el-button>
              </div>
            </div>
          </div>

          <!-- 添加提醒 -->
          <div v-show="isShow_innerDrawer == 2" class="remind_form">
            <div class="remind_form_content">
              <el-form label-position="left" ref="remindForm" :rules="remind_rules" :model="selected_remind_data"
                label-width="80px">
                <el-form-item label="活动名称" prop="reminder_time">
                  <el-date-picker v-model="selected_remind_data.reminder_time" format="yyyy-MM-dd HH:mm:ss"
                    type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="提醒内容" prop="content">
                  <el-input type="textarea" v-model="selected_remind_data.content" :autosize='{ minRows: 5 }'
                    placeholder="备注信息" maxlength="200" resize="none" show-word-limit></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 更多操作 -->
          <!-- isShow_innerDrawer 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预订-->
          <div
            v-show="isShow_innerDrawer == 3 || isShow_innerDrawer == 4 || isShow_innerDrawer == 5 || isShow_innerDrawer == 6 || isShow_innerDrawer == 7 || isShow_innerDrawer == 10"
            class="cancellation_roomlist">

            <!-- 顶部提醒部分 -->
            <div class="backCheckIn" v-if="isShow_innerDrawer == 6 || isShow_innerDrawer == 7 || isShow_innerDrawer == 10"
              :style="{ backgroundColor: isShow_innerDrawer == 6 ? '#FFDFC6' : isShow_innerDrawer == 7 ? '#E6ECFA' : isShow_innerDrawer == 10 ? '#CCCCCC' : '#FFDFC6' }">
              {{ isShow_innerDrawer == 6 ? '撤销入住' : isShow_innerDrawer == 7 ? '撤销退房' : isShow_innerDrawer == 10 ? '恢复预定' :
                '确认' }}后，
              <span v-if="isShow_innerDrawer == 6 || isShow_innerDrawer == 7">
                房间将回到{{ isShow_innerDrawer == 6 ? '已预定' : isShow_innerDrawer == 7 ? '已入住' : '确认' }}状态，相关统计报表将被回滚
              </span>
              <span v-if="isShow_innerDrawer == 10">违约金将自动删除</span>
            </div>

            <div class="cancellation_roomlist_top">
              <div>
                <el-checkbox v-model="cancellation_data.isCheck_allRoom_book"
                  @change="handleCheckAllChange_cancellation">全选</el-checkbox>
              </div>
              <div>
                共 {{ cancellation_data.list ? cancellation_data.list.length : 0 }} 间
                已选{{ cancellation_data ? cancellation_data.checked.length : 0 }}间
              </div>
            </div>
            <div class="cancellation_roomlist_conten" v-if="cancellation_data.list">
              <div class="cancellation_roomlist_conten_list" v-for="(item, index) in cancellation_data.list" :key="index">
                <div class="cancellation_roomlist_conten_list_left">
                  <el-checkbox v-model="item.isCheck" @change="handleCheckChange_cancellation(index)">
                    <span v-if="isShow_innerDrawer != 4">{{ item.room_msg }}</span>
                    <el-cascader v-if="isShow_innerDrawer == 4" :options="roomOptions" v-model="item.room_num_id"
                      filterable :props="{ emitPath: false, checkStrictly: false, }" show-all-levels size="mini"
                      style="width:120px;">
                    </el-cascader>
                  </el-checkbox>
                </div>
                <div class="cancellation_roomlist_conten_list_right">
                  <p>{{ item.date }} </p>
                  <p :style="{ textDecoration: isShow_innerDrawer == 3 ? 'line-through' : 'none' }">房费：￥{{ item.price }}
                  </p>
                  <div style="line-height:28px;" v-if="isShow_innerDrawer != 4 || isShow_innerDrawer == 5">
                    <span>违约金</span>
                    <el-input v-model="item.default_price" style="width:100px;margin-left:20px;" size="mini">
                      <span slot="prefix" style="line-height:28px;">￥</span>
                    </el-input>
                  </div>
                </div>

              </div>
            </div>

            <div class="cancellation_roomlist_bottom">
              <el-input type="textarea" resize="none" :autosize='{ minRows: 4 }'
                :placeholder="cancellation_data.placeholder" v-model="cancellation_data.remarks" maxlength="2048"
                show-word-limit>
              </el-input>
            </div>


          </div>

          <!-- 添加消费 -->
          <div v-show="isShow_innerDrawer == 8" class="consum_form">
            <div class="consum_form_content">
              <el-form ref="consumForm" :rules="consum_rules" hide-required-asterisk
                :model="cancellation_data.consum_form" label-width="80px">
                <el-form-item label="*消费项目" prop="item">
                  <div class="row_input_select">
                    <el-select size="small" style="width: 100%;" v-model="cancellation_data.consum_form.item"
                      placeholder="项目" @change="consum_info_Change(cancellation_data.consum_form, 'consum_form')">
                      <el-option v-for="( items, consumindex ) in  consumeOptions "
                        :key="`items.id+${items.id}+${consumindex}`" :label="items.name" :value="items.id"
                        :disabled="!items.status">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="*数量" prop="num">
                  <el-input v-model.number="cancellation_data.consum_form.num" placeholder="数量" size="small"
                    @change="consum_info_Change(cancellation_data.consum_form, 'consum_form')"></el-input>
                </el-form-item>
                <el-form-item label="*金额" prop="price">
                  <el-input v-model="cancellation_data.consum_form.price" placeholder="金额" size="small">
                    <span slot="prefix" style="color: black;">￥</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="消费日期">
                  <el-date-picker placeholder="选择日期" v-model="cancellation_data.consum_form.date" size="mini"
                    style="width: 100%;" :default-value="cancellation_data.consum_form.date" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" type=date>
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="cancellation_data.consum_form.remarks" :autosize='{ minRows: 5 }'
                    placeholder="备注信息" maxlength="200" resize="none" show-word-limit></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 添加收款 add_collection -->
          <div v-show="isShow_innerDrawer == 9" class="collection_form">
            <div class="collection_form_price">
              <div class="detail_price_Info_order">
                <span>订单金额</span>
                <div style="color: #0486FE;">￥{{ order_detail_data.order_money }}</div>
              </div>
              <div class="detail_price_Info_order">
                <span>已付金额</span>
                <div style="color: #E9AD55;">￥{{ order_detail_data.pay_money }}</div>
              </div>
              <div class="detail_price_Info_order">
                <span>还需付款</span>
                <div style="color: #F56C6C;">￥{{ order_detail_data.no_pay_money }}</div>
              </div>
            </div>
            <div class="collection_form_type_refund" v-show="cancellation_data.add_collection.is_refund == true">
              <div :class="{ 'selectRefund_type': cancellation_data.add_collection.refund_type == 0 }"
                @click="cancellation_data.add_collection.refund_type = 0">线上原路退款</div>
              <div :class="{ 'selectRefund_type': cancellation_data.add_collection.refund_type == 1 }"
                @click="cancellation_data.add_collection.refund_type = 1">线下退款</div>
            </div>
            <div class="collection_form_content">
              <el-form ref="collectionForm" hide-required-asterisk :rules="collection_rules"
                :model="cancellation_data.add_collection" label-width="80px">
                <el-form-item label="项目" prop="item">
                  <div class="row_input_select">
                    <el-select size="small" v-model="cancellation_data.add_collection.item" style="width: 200px;"
                      placeholder="项目">
                      <el-option
                        v-for=" collect  in cancellation_data.add_collection.is_refund == false ? collectOptions : refundOptions"
                        :key="collect.value" :label="collect.label" :value="collect.value"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="*支付方式" prop="pay_type">
                  <div class="row_input_select">
                    <el-select size="small" v-model="cancellation_data.add_collection.pay_type" style="width: 200px;"
                      placeholder="支付方式">
                      <el-option v-for="  payMethod  in  payMethodOptions " :key="payMethod.value"
                        :label="payMethod.label" :value="payMethod.value">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="*金额" prop="price">
                  <el-input v-model="cancellation_data.add_collection.price" placeholder="金额" style="width: 200px;"
                    size="small">
                    <span slot="prefix" style="color: black;">￥</span>
                  </el-input>
                </el-form-item>
                <el-form-item label="日期">
                  <el-date-picker placeholder="选择日期" v-model="cancellation_data.add_collection.date" size="mini"
                    style="width: 200px;" :default-value="cancellation_data.add_collection.date" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" type=date>
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="cancellation_data.add_collection.remarks" :autosize='{ minRows: 5 }'
                    placeholder="备注信息" maxlength="200" resize="none" show-word-limit></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>


          <!-- 订单详情内层嵌套的抽屉底部 -->
          <div class="inner_drawer_order_bottom">
            <div class="drawer_order_bottom_price">
              <div class="drawer_order_bottom_price_detail" v-show="isShow_innerDrawer != 8">
                订单金额：<span style=" color: #0486FE;">￥{{ order_detail_data.order_money }}</span>
                <p>
                  已付: <span style="color: #E9AD55;">￥{{ order_detail_data.pay_money }}</span>
                  还需收款 : <span style="color: #F56C6C;">￥{{ order_detail_data.no_pay_money }}</span>
                </p>
              </div>
            </div>

            <div class="inner_drawer_order_bottom_btn">
              <el-button size="small" @click="cancell_innerDrawer">取消</el-button>
              <!-- =确认添加入住人 -->
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 1"
                @click="subOccupant(order_detail_data.rooms, 'detail')">确认</el-button>
              <!-- 提醒内容提交 -->
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 2"
                @click="submitForm('remindForm', 'detail')">确认</el-button>
              <!-- 添加消费提交 -->
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 8"
                @click="submitForm('consumForm')">确认</el-button>
              <!--添加收款提交 -->
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 9"
                @click="submitForm('collectionForm')">确认</el-button>
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 4"
                @click="more_operate_button('确认入住')">确认入住</el-button>
              <el-button type="primary" size="small" v-show="isShow_innerDrawer == 5"
                @click="more_operate_button('办理退房')">确认退房</el-button>

              <!-- 更多操作部分的按钮 -->
              <el-button type="primary" size="small"
                v-show="isShow_innerDrawer == 3 || isShow_innerDrawer == 6 || isShow_innerDrawer == 7"
                @click="more_operate_button('更多操作', isShow_innerDrawer)">确认</el-button>
            </div>
          </div>
        </el-drawer>
      </el-drawer>
    </div>

    <!-- <div style="margin:20px">
      加载中...
    </div> -->
  </div>
</template>
<script>
/* eslint-disable */
import { cloneDeep } from 'lodash'
import Calendar from 'vue-calendar-component'
import CalendarCell from '../CalendarCell/CalendarCell'
import openOrderPoup from './order-poup.vue'
import Convenient from '../../../../components/convenient_switch/Convenient.vue'
import { GetRoomStatus, GetRoomChannels, GetRoomChannels_stockData } from '@/api/hotel'
import { getdaysAgo, getDateArr, handleDate } from "../../../../api/countDay"//关于日期的方法
import { generateRandomID } from "../../../../api/getRandom"//获取随机id

export default {
  components: {
    Calendar,
    CalendarCell,
    openOrderPoup,
    Convenient,//图例说明
  },
  data() {
    return {
      maxHeight: window.innerHeight - 130,
      hour_room_data: [],
      hotel_id: sessionStorage.getItem('hotel_id'),
      isLoding: false,
      tablekey: true,//表格key，作用：表格数据刷新时，不响应在视图时，更新key值。
      tableData: [],//表格数据
      stockTableData: [],//表格数据
      stockData: {},//库存数据
      roomArr: [],//房间日期信息数据
      nowTime: new Date(),//日历日期、选择的日期
      startTime: getdaysAgo(new Date(), 2, true),//请求的开始时间（库存数，房间日期信息
      endTime: getdaysAgo(new Date(), 27),//请求d的束时间（库存数，房间日期信息
      dateArr: getDateArr(getdaysAgo(new Date(), 2, true), getdaysAgo(new Date(), 27)),//获取日期数组。
      isShowRoomPrice: true,//是否展示房间价格， 否-展示房间数量
      isShow_screen_drawer: false,//房型筛选抽屉
      isScreen: false,//是否开始筛选
      screenTableData: [],//开启筛选之后的表格数据
      screen_room_checkbox: [],//筛选房型数据
      checkAll_screen: false,//是否勾选全部房型
      checked_room_screen: [],//选中的房型
      close_room_dialog: false,//关房对话框
      close_room_data: {//关房数据
        type: 1,// 1停用房 2维修房 3保留房
        remarks: null,//备注
        room_id: null,
        date: null
      },
      // 当前点击选中====操作的房间数组
      operation_room_arr: [],//当前选中进行操作的房间==显示在房间信息的房间

      selectOperated: 0,//判断当前操作，1预订 2入住
      status: 6,//直接入住=>7,预订默认=>6
      isShow_drawer: false,//外层
      innerDrawer: false,//内层
      isShow_drawer_detail: false,//订单详情
      fill_order_title: '修改订单',//外层填写订单标题
      fill_order_title_show: 1,//1填写订单。 2修改订单

      innerDrawer_title: '入住人信息',
      select_room: 0,//当前填写的房型信息 0全日房 1钟点房
      select_detail: 0,//0订单详情，1操作日志
      isShow_innerDrawer: 1,//内层嵌套抽屉显示内容 1入住人，2添加提醒


      roomOptions: [],//房间信息中房间选择器（需要改成每个房间都是独立的数据

      /**
       * 封装抽屉中的数据（只有抽屉用
       */
      channelOptions: [{
        channel_id: 1,
        name: '本地',
        color: 'background-color:#0f8ad8',
      },
      {
        channel_id: 2,
        name: '携程',
        color: 'background-color:#A69340',
      },
      {
        channel_id: 3,
        name: '途家',
        color: 'background-color:#FD8137',
      },
      {
        channel_id: 4,
        name: 'Booking',
        color: 'background-color:#333333',
      },
      {
        channel_id: 5,
        name: '小红书',
        color: 'background-color:#f40a0b',
      },],//渠道选择器
      consumeOptions: [],//消费项目选择器

      // 3收款 4退款 5收押金 6退押金 
      collectOptions: [{
        value: 3,
        label: "收款"
      },
      {
        value: 5,
        label: "收押金"
      }],//收款渠道选择器
      refundOptions: [{
        value: 4,
        label: "退款"
      },
      {
        value: 6,
        label: "退押金"
      }],//退款渠道选择器  
      payMethodOptions: [
        {
          label: '收款码',
          value: 1,
        },
        {
          label: '扫码付',
          value: 2,
        },
        {
          label: '飞猪代收',
          value: 3,
        },
        {
          label: '美团酒店代收',
          value: 4,
        },
        {
          label: '美团民俗代收',
          value: 5,
        }, {
          label: '现金',
          valie: 6
        }],//收款方式选择器
      id_type_options: [
        {
          id: 1,
          label: '未知',
          value: 99
        },
        {
          id: 2,
          label: '身份证',
          value: 0
        }, {
          id: 3,
          label: '护照',
          value: 1
        }, {
          id: 4,
          label: '港澳通行证',
          value: 2
        }, {
          id: 5,
          label: '台湾通行证',
          value: 3
        },
        {
          id: 6,
          label: '回乡证',
          value: 4
        },
        {
          id: 7,
          label: '台胞证',
          value: 5
        },
        {
          id: 8,
          label: '士兵证',
          value: 6
        }, {
          id: 9,
          label: '军官证',
          value: 7
        },
        {
          id: 10,
          label: '其他',
          value: 99
        },
      ],//联系人证件类型

      selected_channel: {},//当前选中的渠道--基本信息
      selected_remind_data: {
        reminder_time: new Date(),
        content: '',
        id: null,
      },//当前显示的添加提醒数据
      selected_checkIn_person_data: {},//当前显示的添加入住人数据
      selsect_item_index: null,//当前显示的添加入住人数据的下标

      /**
      * 提交订单需要用到的数据
      */
      drawer_basic_data: {
        name: null,
        phone: null,
        channel: 1,
        nameTrue: true,
        phoneTrue: true,
        channelTrue: true,
      },//基础信息数据
      drawer_room_data: [],//房间信息数据
      drawer_consumption_data: [],//消费信息数据      
      drawer_collection_data: [],//收款信息数据
      drawer_reminder_data: [],//提醒信息数据
      remarks: null,//备注信息
      remarks_color: null,//订单特殊颜色

      /**
       * 内层抽屉数据
       */
      remind_rules: {
        reminder_time: [{ required: true, message: '请选择提醒时间', trigger: 'blur' }],
        content: [{ required: true, message: '请选择输入备注信息', trigger: 'blur' }],
      },//添加提醒入住的表单规则
      consum_rules: {
        item: [{ required: true, type: 'number', message: '请选择选择消费项目', trigger: 'blur' }],
        num: [{ required: true, type: 'number', message: '请填写数量', trigger: 'blur' }],
        price: [{ required: true, message: '请填写金额', trigger: 'blur' }],
      },//添加消费的表单规则
      collection_rules: {
        pay_type: [{ required: true, type: 'number', message: '请选择选择消费项目', trigger: 'blur' }],
        price: [{ required: true, message: '请填写金额', trigger: 'blur' }],
      },//添加收款表单规则


      checkIn_person_list: [{
        name: null,
        phone: null,
        card_type: 0,
        card_no: null,
        isTrue: true,
      }],// 填写入住人的数据

      /**
       * 订单详情数据
       */
      operate_log_data: [],//操作日志数组
      order_id: 167,//当前详情订单id
      order_status: null,//当前详情订单status
      order_detail_data: {
        "order_no": "",
        "order_id": null,
        "is_hour_room": null,
        "channel": "",
        "user": {
          "name": "",
          "phone": ""
        },
        "rooms": [],
        "room_price": "",
        "order_money": "",
        "pay_money": "",
        "no_pay_money": "",
        "consume_price": null,
        "consume_list": [],
        "reminder": [],
        "pay_list": [],
        "remarks": ""
      },//当前订单详情信息数据

      // 更多操作使用的数据
      cancellation_data: {
        isCheck_allRoom_book: false,
        checked: [],//选中的房间
        placeholder: '请填写取消预订备注',
        list: [],
        remarks: null,
        is_hour_room: 0,//0全日房，1钟点房

        consum_form: {
          item: null,//消费项目
          num: 1,
          price: null,
          date: this.formatDate(new Date()),
          name: null
        },//添加消费表单但信息
        add_collection: {
          is_refund: false,//是否退款
          refund_type: 0,//退款方式 0线上，1线下
          item: null,//项目
          pay_type: null,//支付方式
          price: null,//金额
          date: this.formatDate(new Date()),//日期
          remarks: null,//备注
        },
      },

    }
  },
  watch: {
    // 当前时间
    nowTime(n) {
      console.log(n, 'nowTime')
      this.startTime = getdaysAgo(n, 2, true)//选择的日期赋值给开始日期，
      this.endTime = getdaysAgo(n, 27)//只需要三十天，测试得27，
      this.dateArr = getDateArr(getdaysAgo(n, 2, true), getdaysAgo(n, 27))//重新获取日期数组
      this.getStockData()//重新获取库存
      this.getRoomChannels()//重新获取房间信息
      this.tablekey = !this.tablekey//刷新table数据
    },
    'drawer_basic_data.channel'(newVal) {
      this.channelOptions.forEach(item => {
        if (item.channel_id == newVal) {
          this.selected_channel = item
        }
      })
    },
    deep: true // 开启深度监听
  },
  computed: {
    // 订单价格
    orderPrice() {
      let price = 0;
      this.drawer_room_data.forEach(item => {//计算房间的
        item.price = item.price && item.price.replace(/,/g, '')
        if (isNaN(item.price)) {// item.price 不是数字
          console.log(item.price);
          item.price = 0
        }
        price += parseFloat(item.price)
      });
      this.drawer_consumption_data.forEach(item => {
        item.total_price = item.total_price && item.total_price.replace(/,/g, '')
        if (isNaN(item.total_price)) { // item.total_price 不是数字
          item.total_price = 0
        }
        price += parseFloat(item.total_price)
      })
      // price = (price).toFixed(2
      return price;
    },
    // 表格最大高度
    tableMaxHeight() {
      return this.maxHeight + 'px';
    }
  },

  created() {
    this.getStockData()
    this.getRoomStatus()
    this.selected_channel.color = 'background-color:#0f8ad8'//选中渠道颜色--填写订单

    this.getConsumeList()
    this.getPayChannelList()//获取支付渠道
    // this.roomOptions = this.getAllRoom()//获取所有房间//级联选择器--抽屉，选择房间///选中时间不同，房间也不同，需要重新请求
    this.getAllRoom().then(res => {
      this.roomOptions = res
    })
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    /**
     * 表格中气泡框的的取消
     * 取消选中表格上的房间
     */
    cancell_table_cell_popover() {
      console.log('表格中气泡框的的取消');
      console.log('this.operation_room_arr', this.operation_room_arr);
      this.tableData.forEach(item => {
        this.operation_room_arr.forEach(operationItem => {
          if (operationItem.room_id == item.room.id) {
            operationItem.dates.forEach(time => {
              item.room_dates[time].isShow_operation = false
            })
          }
        })
      })
      this.operation_room_arr = []
      this.drawer_room_data = []
    },

    // 监听窗口大小变化
    handleResize() {
      // 在这里处理窗口大小变化的逻辑
      let screenHeight = window.innerHeight;
      // console.log(screenHeight, '高');
      // 425 除了表格其它元素的高度
      this.maxHeight = screenHeight - 130
      console.log(this.maxHeight, ' this.maxHeight', window.innerHeight);
    },
    // 获取操作日志
    get_operate_log() {
      let data = {
        order_id: this.order_id
      }
      this.my_request('supplier/hotel-pms-order/log', data, "GET").then(res => {
        let { code, data } = res.data
        console.log(res, '获取操作日志');
        if (200 == code) {
          data.forEach(item => {
            item.timestamp = null
            console.log(item);
            item.timestamp = `${item.title}   ${item.create_time}   操作人：  ${item.admin.username}`
          })
          data.sort((a, b) => {
            const dateA = new Date(a.create_time);
            const dateB = new Date(b.create_time);
            // 较新的日期排在前面
            return dateB - dateA;
          })
          this.operate_log_data = data
        }
      })
      this.select_detail = 1

    },


    /**
     * 点击修改订单
     * 转换数据到原有的表格数据中
     */
    modify_Order() {
      this.drawer_room_data = []
      this.drawer_consumption_data = []
      this.drawer_reminder_data = []

      // 获取选中渠道
      let channel_id = null
      this.channelOptions.forEach(element => {
        if (element.name == this.order_detail_data.channel) {
          channel_id = element.channel_id
          this.selected_channel = element
        }
      })
      // 基本信息
      this.drawer_basic_data.name = this.order_detail_data.user.name
      this.drawer_basic_data.phone = this.order_detail_data.user.phone
      this.drawer_basic_data.channel = channel_id
      // 房间信息
      this.order_detail_data.rooms.forEach(room => {
        // console.log(room.id,'drawer_room_data');
        this.drawer_room_data.push({
          days: parseInt(room.date.substring(room.date.indexOf("，") + 1, room.date.indexOf("晚"))),
          date: room.date.split("至")[0],
          room_id: room.room_num_id,
          price: room.price,
          isTrue: true,
          people: room.people,
          order_room_id: room.id,
          is_has_order_room: true
        })
      });

      console.log(this.order_detail_data.rooms, 'this.order_detail_data.rooms');
      console.log(this.drawer_room_data, ' this.drawer_room_data');


      // 消费信息
      let consume_option = {}
      this.order_detail_data.consume_list.forEach(consume => {
        consume_option = {
          id: generateRandomID(),//消费项目id
          name: consume.title,
          price: consume.price.substring(1),//消费项目价格
          status: false,//消费项目是否启动
          type_id: null,
        }
        this.consumeOptions.push(consume_option)
        this.drawer_consumption_data.push({
          date: consume.date,
          remarks: consume.remarks,
          total_price: consume.price.substring(1),
          remarks: consume.remarks,
          title: consume.title,
          num: 1,
          consum_item: consume_option
        })
      })
      this.order_detail_data.reminder.forEach(reminder => {
        this.drawer_reminder_data.push({
          reminder_time: reminder.date,
          content: reminder.content,
          id: reminder.id,
          is_remind: reminder.is_remind
        })
      })
      // 备注信息
      this.remarks = this.order_detail_data.remarks

      this.fill_order_title = '修改订单'
      this.fill_order_title_show = 2
      this.isShow_drawer = true
    },


    /**
     * 更多操作
     * ---取消预订
     * @param {num} isShow_innerDrawer 内层嵌套抽屉显示的内容, 
     * @param {num} status 当前订单状态, 
     * value 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款
     * 
     * 点击更多操作之后，先获取可操作的房间数据，如果没有则提示
     * 有就进行下一步操作，打开抽屉
     * 
     * 不显示底部订单价格信息的有===办理入住， 撤销入住，撤销退房
     * 
     * 已完成（已退房）的订单只有撤销退房操作，其它按钮都没有
     * 已预订，进行中，已完成，(待确认，待付款)
     *
     */
    moreOperate(num) {
      console.log(this.order_status, 'this.order_status更多操作');
      this.isShow_innerDrawer = num
      if (num == 8 || num == 9) { //添加收款/消费等操作不需要判断有无可操作数据
        if (this.isShow_innerDrawer == 8) {
          this.innerDrawer_title = '添加消费'
          this.getConsumeList()
          this.cancellation_data.consum_form = {
            item: null,
            num: 1,
            price: null,
            date: this.formatDate(new Date()),
            name: null
          }
        } else if (this.isShow_innerDrawer == 9) {
          this.cancellation_data.add_collection = {
            is_refund: false,//是否退款
            refund_type: 0,//退款方式 0线上，1线下
            item: null,//项目
            pay_type: null,//支付方式
            price: null,//金额
            date: this.formatDate(new Date()),//日期
            remarks: null,//备注
          }
          this.innerDrawer_title = '添加收款'
        }
      } else {
        let data_room = {
          order_id: this.order_id,
          status: this.order_status
        }
        this.my_request('supplier/hotel-pms-order/more', data_room, 'GET').then(res => {
          let { code, data } = res.data
          if (200 == code) {
            if (data.length == 0) {
              this.cancellation_data.list = []
              this.$message.warning('没有可操作的房间！');
              return
            } else {
              // this.roomOptions  办理入住需要获取，房间信息，并且需要判断钟点房和全日房
              if (this.isShow_innerDrawer == 3) {
                this.innerDrawer_title = '取消预订'
                this.cancellation_data.placeholder = '请填写取消预订备注'
              } else if (this.isShow_innerDrawer == 4) {
                this.innerDrawer_title = '办理入住'
                this.cancellation_data.placeholder = '请填写办理入住备注'
              } else if (this.isShow_innerDrawer == 5) {
                this.innerDrawer_title = '办理退房'
                this.cancellation_data.placeholder = '请填写办理退房备注'
              } else if (this.isShow_innerDrawer == 6) {
                this.innerDrawer_title = '撤销入住'
                this.cancellation_data.placeholder = '请填写撤销入住备注'
              } else if (this.isShow_innerDrawer == 7) {
                this.innerDrawer_title = '撤销退房'
                this.cancellation_data.placeholder = '请填写撤销退房备注'
              } else if (this.isShow_innerDrawer == 10) {
                this.innerDrawer_title = '恢复预定'
                this.cancellation_data.placeholder = '请填写恢复预定备注'
              }

              // 多选操作
              this.cancellation_data.list = data.map(item => {
                item.isCheck = true
                item.default_price = 0
                return item
              })
              this.cancellation_data.isCheck_allRoom_book = true//默认全选
              this.cancellation_data.checked = this.cancellation_data.list
            }
          } else {
            this.$message.warning('没有可操作的房间！');
          }
        })
      }
      this.innerDrawer = true
    },

    /**
     * 
     * isShow_innerDrawer 1入住人,2添加提醒,3取消预订,4办理入住，5办理退房，6撤销入住,7撤销退房,8添加消费，9添加收款,10恢复预订
     * 更多操作确认按钮
     *  @param {*} operate  
     *  @param {*} more_operate  更多操作按钮的传值
     * 
     */
    more_operate_button(operate, more_operate) {
      // 处理房间信息
      let rooms = []
      // console.log(this.cancellation_data.checked, '办理数据房间');
      this.cancellation_data.checked.forEach(element => {
        if ('确认入住' == operate || '办理退房' == operate) {
          rooms.push({
            id: element.id,
            room_num_id: element.room_num_id,
          })
        }
        else if ('更多操作' == operate) {
          rooms.push({
            id: element.id,
            penalty_money: element.default_price,
          })
        }
      })

      // 办理退房和办理入住部分
      if ('确认入住' == operate || '办理退房' == operate) {
        let url = ''
        if ('确认入住' == operate) {
          url = 'supplier/hotel-pms/check-in'
          console.log('确认入住');
        } else if ('办理退房' == operate) {
          url = 'supplier/hotel-pms/check-out'
          console.log('办理退房');
        }
        let check_in_data = {
          order_id: this.order_id,
          rooms,
          remarks: this.cancellation_data.remarks
        }
        console.log(check_in_data, '办理数据data');

        this.my_request(url, check_in_data, "PUT").then(res => {
          let { code, message } = res.data
          console.log(res, '操作结果');
          if (200 == code) {
            this.get_order_detail()//重新获取订单详情数据
            this.change_tableStatus(operate)//修改表格数据中的房间状态
            this.innerDrawer = false
            this.$message.success(message)
          } else {
            this.$message.error('操作失败')
          }

        })
      }
      // 操作（取消订单 撤销入住 撤销退房 恢复订单）
      else if ('更多操作' == operate) {
        let new_operate = null
        switch (more_operate) {
          case 3:
            new_operate = "取消预订";
            break;
          case 6:
            new_operate = "撤销入住";
            break;
          case 7:
            new_operate = "撤销退房";
            break;
          case 10:
            new_operate = '恢复订单';
            break;
          default:
            new_operate = '恢复订单';
            break;
        }
        let more = {
          order_id: this.order_id,
          room_info: rooms,
          remarks: this.cancellation_data.remarks
        }
        // console.log(more, '更多操作数据');
        this.my_request('supplier/hotel-pms-order/handel', more, "PUT").then(res => {
          let { code, message } = res.data
          // console.log(res,'获取订单列表');
          if (200 == code) {
            this.get_order_detail()//重新获取订单详情数据
            this.change_tableStatus(new_operate)//修改表格数据中的房间状态
            this.$message.success(message)
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },


    /**
    * 
    * @param {*} operate 进行的操作，根据进行的操作来判断转什么状态(显示在表格中)
    * 取消预订==》0
    * 办理入住==》7 撤销入住==》6
    * 办理退房==》8 撤销退房==》7
    * 恢复订单0==》6
    * 
    * 通过当前选中操作的房间，在tableroom数据里面找到相对应的数据，改变状态//避免请求房间数据(数据多，响应慢)
    * 
    */
    change_tableStatus(operate) {
      // console.log(operate);
      let change_status = 0
      switch (operate) {
        case "取消预订":
          change_status = 9;
          break;
        case "确认入住":
          change_status = 7;
          break;
        case "撤销入住":
          change_status = 6;
          break;
        case "办理退房":
          change_status = 8;
          break;
        case "撤销退房":
          change_status = 7;
          break;
        case "恢复订单":
          change_status = 6;
          break;
        default:
          change_status = 0;
          break;
      }
      this.order_status = change_status//修改订单详情的状态

      // 以下是日历房态需要的
      this.cancellation_data.checked.forEach(chesckRoom => {
        console.log(chesckRoom, 'chesckRoom');
        this.tableData.forEach(tableRoom => {
          if (tableRoom.room.id == chesckRoom.room_num_id) {//找到操作数据的房间id
            // console.log(tableRoom.room.id, tableRoom, '需要改变的房间');
            let date = chesckRoom.date.substring(0, 10)//改变状态的日期
            let startIndex = chesckRoom.date.indexOf("共") + 1;
            let endIndex = chesckRoom.date.indexOf("晚");
            let day = parseInt(chesckRoom.date.substring(startIndex, endIndex))
            let dateArr = getDateArr(date, getdaysAgo(date, day))
            for (const key in tableRoom.room_dates) {
              for (let i = 0; i < dateArr.length; i++) {
                if (key == dateArr[i] && tableRoom.room_dates[key]) {
                  tableRoom.room_dates[key].room_info.status = change_status//修改状态
                }
              }

            }
          }
        })
      })

    },


    /**
     * 点击有订单的房间之后，
     * 修改当前的订单状态（order_status）和订单id（order_id）
     * 再调用获取订单详情的方法。
     * 打开订单详情抽屉
     */
    table_has_order_room(room) {
      console.log(room, '房间数据');
      this.order_status = room.room_info.status
      this.order_id = room.room_info.order_info.order_id
      this.get_order_detail()
      this.isShow_drawer_detail = true
      // console.log(room, '有订单的房间');
    },


    // 获取订单详情
    get_order_detail() {
      let data = {
        order_id: this.order_id ? this.order_id : 165
      }
      console.log(data, '获取订单详情');
      this.my_request('supplier/hotel-pms-order/show', data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          this.order_detail_data = data
          console.log(data, 'get_order_detail');
        }
      })
    },
    // 更多操作里的全选
    handleCheckAllChange_cancellation(val) {
      this.cancellation_data.checked = val ? this.cancellation_data.list : []
      this.cancellation_data.list.forEach(element => {
        element.isCheck = val ? true : false
      });
    },
    // 更多操作里的多选按钮
    handleCheckChange_cancellation() {
      let isAll = true
      this.cancellation_data.list.forEach(element => {
        if (element.isCheck == false) {
          isAll = false
        }
      });
      this.cancellation_data.isCheck_allRoom_book = isAll

      this.cancellation_data.checked = this.cancellation_data.list.filter(item => {
        return item.isCheck
      })
      // console.log(this.cancellation_data.checked, '更多操作数据');
    },
    /**
     * 删除消费项
     * @param {*} name consum消费项目。pay收款项目
     */
    handleDelete(rowId) {
      let data = {
        id: rowId
      }
      this.my_request('supplier/hotel-pms', data, 'DELETE').then(res => {
        console.log(res, '删除消费项目')
        let { code, message } = res.data
        if (200 == code) {
          this.$message.success(message)
          this.get_order_detail()
        } else {
          this.$message.error('删除失败')
        }
      })
    },


    // 筛选房型全选
    handleCheckAllChange(val) {
      let all_room = []
      this.stockTableData.forEach(item => {
        all_room.push(item.id)
      })
      this.checked_room_screen = val ? all_room : [];
    },
    // 筛选房型单选按钮
    handleCheckedCitiesChange(value) {
      this.checkAll_screen = this.checked_room_screen.length === this.screen_room_checkbox.length;
    },
    // 确认筛选
    submit_screen() {
      console.log(this.checked_room_screen, 'this.checked_room_screen');
      this.checked_room_screen.sort((a, b) => {
        return this.screen_room_checkbox.findIndex(item => item.id === a) - this.screen_room_checkbox.findIndex(item => item.id === b);
      });
      console.log(this.checked_room_screen, 'this.checked_room_screen');


      let newTableDate = []
      this.checked_room_screen.forEach(selectId => {
        if (this.isShowRoomPrice) {
          this.tableData.forEach(priceItem => {
            if (priceItem.id == selectId) {
              newTableDate.push(priceItem)
            }
          })
        } else {
          this.stockTableData.forEach(stockItem => {
            if (stockItem.id == selectId) {
              newTableDate.push(stockItem)
            }
          })
        }
      })
      this.isScreen = true//确认筛选之后换数据
      this.screenTableData = newTableDate
      // console.log(this.screenTableData, ' this.screenTableData');
    },

    // 获取房型和房间
    getRoomStatus() {
      let getRoomStatus_data = {
        hotel_id: this.hotel_id
      }
      GetRoomStatus(getRoomStatus_data).then(res => {
        let { code, data } = res.data
        data.forEach(item => {
          this.screen_room_checkbox.push({
            id: item.id,
            title: item.title
          })
        })
        this.stockTableData = cloneDeep(data)
        if (200 == code) {
          res.data.data.forEach(item => {
            item.rooms.forEach(items => {
              this.tableData.push({
                room: items,
                title: item.title,
                nums: item.nums,
                id: item.id,
                isShowRoomClean_dirty: false//是否展示房间转净/脏房
              })
            })
          })
          this.getRoomChannels()
          console.log(this.tableData, 'this.tableData');
          this.tablekey = !this.tablekey//刷新table数据

          // console.log(this.stockTableData, 'this.stockTableData');
        }
      })

    },
    // 获取房间信息（带日期的价格数据
    getRoomChannels() {
      console.log('调用了获取房间信息（带日期的价格数据');
      let getRoomChannels_data = {
        hotel_id: this.hotel_id,
        start_date: this.nowTime,
        end_date: this.endTime,
      }
      GetRoomChannels(getRoomChannels_data).then(res => {
        let { code, data } = res.data
        if (200 == code) {
          this.roomArr = []
          for (let i = 0; i < data.length; i++) {
            for (let key in data[i]) {
              data[i][key].room_num = key//将key'201'添加到数据里面
              this.dateArr.forEach(date_item => {
                data[i][key][date_item].isShow_operation = false//添加数据--展示房间数据或者操作
              })
              this.roomArr.push(data[i][key])
            }
          }
          this.tableData.forEach(item => { //对比两组数据的id，将含有日期的数据添加到表格数据里面
            this.roomArr.forEach(items => {
              if (item.room.id == items.id) {
                item.room_dates = items
              }
            })
          })
          this.checkdate_isPass()

          //先展示房间。后展示价格。原因：网络请求慢一步。
          this.tablekey = !this.tablekey//刷新key值，可以刷新数据表格
          // console.log(res.data, 'res.data');
          // console.log(this.tableData, 'roomArrtableData');
        }
      })
    },
    // 判断订单的开始日期是否不在表格范围内
    checkdate_isPass() {
      let show_start_Time = this.dateArr[0]
      this.dateArr.forEach(date => {
        this.tableData.forEach((item, index) => {
          let room_info = item.room_dates[date].room_info

          if (room_info.has_order) {// 判断是否有订单
            let order_info = item.room_dates[date].room_info.order_info
            let ispass = this.date_adjacent(show_start_Time, '2023-08-05', true)
            if (ispass < 0) {
              order_info.ispass_startDate = true
              if (show_start_Time == date) {
                let passDay = this.date_adjacent(show_start_Time, order_info.start_date, true)
                order_info.after_start_date = date
                order_info.residue_days = order_info.day + passDay
              }
            }
          }
        })

      })
      // console.log(this.tableData[0].room_dates['2023-08-06'], 'this.checkdate_isPass');
      this.tableData.forEach(item => {
        // item.room_dates
      })

    },
    // 获取库存
    getStockData() {
      let getStock_data = {
        hotel_id: this.hotel_id,
        start_date: this.nowTime,
        end_date: this.endTime,
      }
      // 获取到room和total数据
      // room展示每个房型的库存，total展示当日所有房型的库存
      GetRoomChannels_stockData(getStock_data).then(res => {
        let { code, data } = res.data
        if (200 == code) {
          this.stockData = cloneDeep(data)
          // console.log(data.room, 'stockData');

          this.stockTableData.forEach(item => {
            for (const roomkey in data.room) {
              for (const key in data.room[roomkey]) {
                if (item.id == key) {
                  item.stock = data.room[roomkey][key]
                }
              }
            }
          })
        }

        // console.log(this.stockTableData, 'this.stockTableData');
        // console.log(this.stockData, ' this.stockData ');
      })
    },
    // 合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.title !== this.tableData[rowIndex - 1].title) {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].title === row.title) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    /**
     * 日期筛选按钮 '今'
     * 日期左右两边
     * @param {*} val 0-<往前30天， 1->往后三十天
     */
    select_TodayTime(val) {
      if (val) {
        this.nowTime = getdaysAgo(this.nowTime, 28)
      } else {
        this.nowTime = getdaysAgo(this.nowTime, 28, true)
      }
    },
    /**
     * 转为脏净房
     * @param {int} id //房间id
     */
    change_dirty_clean(id) {
      let setRoomClear_data = {
        room_num_id: id
      }
      this.my_request('supplier/hotel-pms/clean', setRoomClear_data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          console.log(message, '转为脏净房');
          this.tableData.forEach(element => {
            if (element.room.id == id) {
              if (element.room.is_need_clean == 0) { //0表示净房 1表示脏房
                element.room.is_need_clean = 1
                this.$message.success('转为脏房成功');
              } else {
                element.room.is_need_clean = 0
                this.$message.success('转为净房成功');
              }
            }
          })
        }
      })
    },
    /**
     * 鼠标移入--房间 显示转脏/净房
     * @param {*} row 
     */
    handleMouseEnter_cleanRoom(row) {
      // console.log('鼠标移入', row.room.id);
      this.tableData.forEach(item => {
        if (item.room.id == row.room.id) {
          item.isShowRoomClean_dirty = true
        }
      })
    },
    /**
     * 鼠标移出  显示转脏/净房
     * @param {*} row 
     */
    handleMouseLeave_cleanRoom(row) {
      // console.log('鼠标移出', row.room.id);
      this.tableData.forEach(item => {
        if (item.room.id == row.room.id) {
          item.isShowRoomClean_dirty = false
        }
      })
    },



    /**
     * 点击房间信息，显示操作房间的盒子
     * @param {*} row 点击的当前行，
     * @param {*} time 点击的日期，根据日期获取到具体的房间格子
     */
    click_room_info(row, time) {
      let roomId = row.room.id //当前点击的房间id

      this.tableData.forEach(item => {//遍历渲染表格的数组
        if (roomId == item.room.id) {//在表格数组中找到点击的房间
          //判断显示操作，还是显示价格 当前 isShow_operation = true则表示，点击之前是显示操作，点击之后取消操作显示价格
          if (item.room_dates[time].isShow_operation == true) {
            item.room_dates[time].isShow_operation = false// 否，将数据从 operation_room_arr 数组 移除

            /**
             * 
             * 1--在operation_room_arr数组，找到当前房间id，
             * 2--在当前id的元素里找到，遍历dates日期，找到当前time，并将它移除，
             * 3--如果移除之后dates数组长度==0，就移除该条数据
             * 4--如果移除之后dates数组中的日期不临近了，则拆分开，临近的在一个数据中，不临近的则新增到operation_room_arr数组
             */
            this.operation_room_arr.forEach((item, index) => {
              if (item.room_id === roomId) {
                let dateIndex = item.dates.indexOf(time);
                if (dateIndex !== -1) {
                  console.log('移除当前房间的当前时间');
                  item.dates.splice(dateIndex, 1); // 移除当前时间

                  if (item.dates.length === 0) {
                    console.log('当前数据的dates为空，从operation_room_arr移除该条数据');
                    this.operation_room_arr.splice(index, 1); // 移除该条数据
                  }
                  /**
                   *1--- 遍历当前移除该条数据的数据中的的dates数组，
                   *2--- 直接添加第一个日期到adjacentDates数组里，
                   *3--- 判断当前日期，是否与上一个日期相邻，如果相邻则添加到adjacentDates数组
                   *4--- 不相邻则代表，当前dates数组从这里断开了，则新增数据到operation_room_arr数组里的dates数组，
                   *5--- 元素dates为adjacentDates数组，room_id为当前点击房间的room_id
                   *6--- 并且从dates数组里splice
                   * 
                   * 因为一次只会移除一个数据，所以一般只会断开一处地方，找到不临近的日期之后就可以退出了
                   */

                  let adjacentDates = []; // 存储相邻的日期
                  let end = true//是否结束，一般只会断开一个地方，因为一次只取消选中了一个
                  for (let i = 0; i < item.dates.length; i++) {
                    if (end == false) {
                      return
                    }
                    if (i === 0 || this.date_adjacent(item.dates[i], item.dates[i - 1])) {
                      adjacentDates.push(item.dates[i]);
                    } else {
                      // 找到不临近的日期，将之前所有相邻的日期作为一个新的数据项，新增到operation_room_arr数组中
                      // this.operation_room_arr.push({
                      //   room_id: roomId,
                      //   dates: adjacentDates,
                      // })
                      let newData = {
                        room_id: roomId,
                        dates: adjacentDates,
                      }
                      this.operation_room_arr.splice(index, 0, newData);//将新数据插入到原数据之前的位置

                      item.dates.splice(0, adjacentDates.length);// 从原来的dates数组中将相邻的日期移除
                      end = false//退出
                    }
                  }

                }
              }
            })

          } else {
            item.room_dates[time].isShow_operation = true // 是，将数据添加到 operation_room_arr 数组

            /**
             * 1---数组里面没有数据 添加到数组,operation_room_arr
             * 2---数组里面没有当前房间id，添加到数组,operation_room_arr
             * 3---数组里面有当前房间id，但是日期不临近 添加到数组,operation_room_arr
             * 4---数组里面有当前房间id，日期临近 不添加到数组，day+1，当前日期添加到dates数组
             * 5---添加时要判断，数组中是否有当前房间id相同的元素，然后遍历当前房间id相同的元素，判断当前日期是否与元素的dates日期临近，
             * 临近则添加到dates数组里，遍历与当前房间id下所有元素的dates数组都不临近才新增到operation_room_arr数组
             * 6---完成上一步之后，还需要再次遍历一下数组中当前房间id的元素，判断当前房间id的元素中的dates数组日期是否临近，
             * 临近则合并
             */

            // 查找是否存在当前房间
            let existingRooms = this.operation_room_arr.filter(item => item.room_id === roomId);

            if (existingRooms.length === 0) {
              console.log('operation_room_arr数组里面没有当前房间id');
              this.operation_room_arr.push({
                room_id: roomId,
                dates: [time]
              });
              return;
            }

            let shouldAddNewRoom = true;

            // 会先查找是否存在与当前房间ID相同的房间对象，然后遍历这些房间对象。
            // 如果找到与当前日期临近的房间对象，则将当前日期添加到该房间对象的日期数组中，并设置变量 shouldAddNewRoom 为 false，表示无需新增房间对象。
            // 如果遍历完所有房间对象后 shouldAddNewRoom 仍为 true，则表示当前日期与所有房间对象的日期都不临近，此时再新增一个房间对象。
            for (let existingRoom of existingRooms) {
              let isAddBefore = this.date_adjacent(existingRoom.dates[0], time);
              let isAddAfter = this.date_adjacent(existingRoom.dates[existingRoom.dates.length - 1], time);

              if (isAddBefore || isAddAfter) {
                console.log('有当前房间，日期临近', isAddBefore, isAddAfter);
                existingRoom.dates.push(time);//将当前时间添加进数组
                existingRoom.dates = this.dateSort(existingRoom.dates);//给日期数组排序
                shouldAddNewRoom = false;
                break;
              }
            }

            if (shouldAddNewRoom) {
              console.log('有当前房间，但日期不临近');
              this.operation_room_arr.push({
                room_id: roomId,
                dates: [time]
              });
            }
            //合并同一个房间中，dates日期相同的数据
            this.merge_roomArr_dates(roomId)

          }
        }
      })
      //当抽屉打开时，调用转换数据的方法，将数据转换到drawer_room_data数组里面
      //抽屉没有打开时，则再打开抽屉时调用
      if (this.isShow_drawer == true) {
        this.conversion_operation_to_drawer()
      }
    },

    /**
     * 
     * @param {*} roomId 当前添加的房间的roomid、
     * 合并operation_room_arr数组中具有相同房间 room_id 的元素的日期数据
     * 使用两个嵌套的循环，外部循环遍历operation_room_arr数组，内部循环从外部循环的当前位置后面开始遍历数组
     * 对于当前房间(room)，内部循环检查后续的房间(nextRoom)是否具有相同的room_id。如果找到了相同的房间，它会进一步检查日期是否临近
     * 如果日期临近，即isMergeBefore或isMergeAfter为true，则表示当前房间和后续房间的日期可以合并。
     * 在这种情况下，它会将后续房间的日期(nextRoom.dates)追加到当前房间的日期(room.dates)中，并通过调用dateSort函数对日期进行排序
     * 然后，它会从operation_room_arr数组中移除后续房间(this.operation_room_arr.splice(j, 1))，并将merged标志设置为true以跳出内部循环
     * 外部循环到达合并房间后会立即终止，因为已经完成了房间的合并操作
     * 一般来说一次只添加一个房间，所以在合并一次之后就退出循环
     */
    merge_roomArr_dates(roomId) {
      for (let i = 0; i < this.operation_room_arr.length; i++) {
        let room = this.operation_room_arr[i];
        if (room.room_id === roomId) {
          let merged = false;
          for (let j = i + 1; j < this.operation_room_arr.length; j++) {
            let nextRoom = this.operation_room_arr[j];
            if (nextRoom.room_id === roomId) {
              let isMergeBefore = this.date_adjacent(room.dates[room.dates.length - 1], nextRoom.dates[0]);
              let isMergeAfter = this.date_adjacent(room.dates[0], nextRoom.dates[nextRoom.dates.length - 1]);
              if (isMergeBefore || isMergeAfter) {
                console.log('存在当前房间，日期临近，合并');
                room.dates = room.dates.concat(nextRoom.dates);
                room.dates = this.dateSort(room.dates);
                this.operation_room_arr.splice(j, 1);
                merged = true;
                break;
              }
            }
          }
          if (merged) {
            break;
          }
        }
      }
    },

    /**
     * 给一组日期，排序
     * @param {*} dates 日期数组
     */
    dateSort(dates) {
      dates.sort((a, b) => {
        let dateA = new Date(a);
        let dateB = new Date(b);
        return dateA.getTime() - dateB.getTime();
      });
      return dates
    },
    /**
     * 判断两个日期是否为相邻日期
     * @param {*} existTiem 已有日期
     * @param {*} newTime 要比较的日期
     */
    date_adjacent(existTiem, newTime, bool) {
      let existingDate = new Date(existTiem);
      let newDate = new Date(newTime);
      let diffDays = Math.round((newDate - existingDate) / (1000 * 60 * 60 * 24));
      if (bool) {
        return diffDays
      } else {
        if (diffDays === 1 || diffDays === -1) {// 1代表后一天，-1代表前一天
          // console.log('日期临近', diffDays);
          return true //相邻日期 为true，
        } else {
          return false
        }
      }
    },

    // 是否展示价格/库存
    handleShowRoomPrice() {
      this.isShowRoomPrice = !this.isShowRoomPrice
      this.tablekey = !this.tablekey
    },

    /**
     * 
     * 打开关房对话框
     * @param {*} room_id 房间ｉｄ
     * @param {*} time 日期
     */
    open_close_room(room_id, time) {
      this.isShow_drawer = false //关房之前关闭抽屉
      this.close_room_data.type = 1 //重置表单数据
      this.close_room_data.remarks = null
      this.close_room_dialog = true
      this.close_room_data.date = time
      this.close_room_data.room_id = room_id
    },
    // 确定关房
    submit_close_room() {
      let data = {
        room_num_id: this.close_room_data.room_id,
        date: this.close_room_data.date,
        remarks: this.close_room_data.remarks,
        status: this.close_room_data.type,
      }
      this.my_request('supplier/hotel-pms/close', data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          this.close_room_dialog = false
          this.getRoomChannels()
          this.$message.success('关房成功');
        }
      })
    },
    // 开房
    open_room(room_id, time) {
      let data = {
        room_num_id: room_id,
        date: time,
      }
      this.my_request('supplier/hotel-pms/open', data, 'PUT').then(res => {
        let { code, message } = res.data
        if (200 == code) {
          this.getRoomChannels()
          this.$message.success('开房成功');
        }
      })
    },
    // 关房部分



    /**
     * 关房==》转预定
     * @param {*} diff_today 用于判断是 0==今日(预定，入住) 1==明日(预定)
     * @param {*} row 当前行房间信息
     * @param {*} time 日期
     * 
     * 转预定操作
     * 1，先开房，调用开房
     * 2，显示紫色勾勾，操作状态盒子，调用方法
     * 3，打开对话框，根据diff_today判断
     */
    reschedule(row, time) {
      // 1
      this.open_room(row.room.id, time)//开房

      setTimeout(() => {
        // 2
        this.click_room_info(row, time)

        // 3
        let operat = null
        let diff_today = row.room_dates[time].diff_today
        if (diff_today == 0) {
          operat = 2
        } else if (diff_today == 1) {
          operat = 1
        }
        this.fill_order_title_show = 1
        this.openDrawer(operat)
      }, 700);
    },
    /**
     * 
     * 在日历中点击操作时的判断
     * @param {*} operat//判断当前操作，1预订 2入住 3补录
     * 
     */
    openDrawer(operat) {
      this.select_room = 0
      this.drawer_room_data = []

      this.fill_order_title_show = 1
      this.conversion_operation_to_drawer()
      //点击操作，当前抽屉打开时,需要先关闭，再次打开==有动画
      // 不用再次打开的情况 1-抽屉关闭时，2-操作相同时，
      if (this.isShow_drawer == false || this.selectOperated == operat) {
        this.selectOperated = operat
        setTimeout(() => {
          this.isShow_drawer = true
        }, 500)
      } else {
        this.isShow_drawer = false
        setTimeout(() => {
          this.selectOperated = operat
          this.isShow_drawer = true
        }, 500)
      }
      // console.log(this.selectOperated ,'this.selectOperated ');
    },
    /**
     * 数据转换
     * 将operation_room_arr数据，转换到drawer_room_data数据里面
     */
    conversion_operation_to_drawer() {
      let arr = []
      // this.roomOptions =  getAllRoom()
      this.operation_room_arr.forEach(async (item, index) => {
        let alldata = {
          hotel_id: this.hotel_id,
          is_hour_room: 0,//0全日房 1 钟点房
          date: item.dates[0]//入住日期 
        }
        // this.getAllRoom(alldata).then(async res => {
        //   console.log(res);
        arr.push({
          date: item.dates[0],//入住日期
          days: item.dates.length,//入住天数
          room_id: item.room_id,//房间id
          price: 0,//房间j价格
          dates: item.dates,//日期数组,
          people: [],
          isTrue: true,
          // room_options:res?res: this.roomOptions
          // room_options: this.roomOptions
        })

        // console.log(arr[index],'arr[index]');
        await this.room_info_Change(arr[index])//获取价格

        setTimeout(() => {
          this.drawer_room_data = arr
        }, 500);

      })

    },


    // 抽屉内事件
    /**
    * 外层提交订单
    * @param {*} num 判断时入住还是预订 0直接入住 1预定 4修改订单保存
    * 
    */
    submit_order(num) {
      //验证信息
      if (this.order_verify() == false) {
        return
      }

      if (num == 0) {
        this.status = 7//直接入住
      } else if (num == 1) {
        this.status = 6//预订
      }

      // 数据处理



      let room_info = []
      let consume_info = []
      let pay_info = []
      let reminder = []
      this.drawer_room_data.forEach(item => {
        // console.log(item,'item.drawer_room_data');
        if (num == 4) {
          room_info.push({
            room_num_id: item.room_id,
            start_date: this.select_room == 0 ? item.date : this.formatDate(new Date(item.date), 1),
            price: item.price,
            day: item.days,
            people: item.people,
            id: item.order_room_id ? item.order_room_id : 0
          })
        } else if (num == 0 || num == 1) {
          room_info.push({
            room_num_id: item.room_id,
            start_date: this.select_room == 0 ? item.date : this.formatDate(new Date(item.date), 1),
            price: item.price,
            day: item.days,
            people: item.people,
          })
        }

      })
      // console.log(this.drawer_room_data, ' this.drawer_room_data');
      this.drawer_consumption_data.forEach(item => {
        consume_info.push({
          date: item.date,
          price: item.total_price,
          num: item.num,
          remarks: item.remarks,
          name: item.consum_item.name
        })
      })
      this.drawer_collection_data.forEach(item => {
        pay_info.push({
          date: item.date,
          remarks: item.remarks,
          price: item.price,
          type: item.type,
          pay_type: item.pay_type
        })
      })
      this.drawer_reminder_data.forEach((item, index) => {
        reminder.push({
          reminder_time: item.reminder_time,
          content: item.content
        })
      })




      // 调用接口
      if (num == 0 || num == 1) {
        let data = {
          hotel_id: this.hotel_id,//民宿/酒店id
          status: this.status,//预订6、入住7
          name: this.drawer_basic_data.name,//客户姓名
          phone: this.drawer_basic_data.phone,//客户手机号
          channel_id: this.drawer_basic_data.channel,//来源渠道id
          room_info: room_info,//房间信息
          consume_info: consume_info,//消费信息
          pay_info: pay_info,//付款信息
          reminder: reminder,//订单提醒
          remarks: this.remarks,//备注
          is_hour_room: this.select_room,//是否是钟点房 1 钟点房 0 全日房
        }
        console.log(data, '提交的订单数据、预订和入住');
        this.my_request('supplier/hotel-pms-order', data, 'POST').then(res => {
          console.log(res, 'res');
          let { code, data, message } = res.data
          if (200 == code) {
            this.getRoomChannels()
            this.$message.success(message);
            // 清空数据
            this.drawer_basic_data.phone = null
            this.drawer_basic_data.name = null
            this.drawer_room_data = []
            this.operation_room_arr = []

            // 打开订单详情 抽屉
            this.order_id = data.order_id
            this.get_order_detail()
            this.isShow_drawer_detail = true
            this.order_status = this.status
          } else {
            this.$message.warning(message);
          }
        })
      }
      else if (4 == num) {
        console.log('保存订单');

        let edit_order_data = {
          order_id: this.order_id,
          name: this.drawer_basic_data.name,//客户姓名
          phone: this.drawer_basic_data.phone,//客户手机号
          channel_id: this.drawer_basic_data.channel,//来源渠道id
          room_info: room_info,//房间信息
          consume_info: consume_info,//消费信息
          remarks: this.remarks,//备注
        }
        console.log(edit_order_data, '修改了订单的数据');
        this.my_request('supplier/hotel-pms-order', edit_order_data, 'PUT').then(res => {
          console.log(res, '保存订单');
          let { code, message } = res.data
          if (200 == code) {
            this.$message.success(message)
            this.get_order_detail()
            this.isShow_drawer = false
          } else {
            this.get_order_detail()
            this.$message.error('修改失败')
          }
        })
        // 保存订单
      }

    },

    // 取消
    cancell_order(drawer) {
      if (drawer == 'outDrawer') {
        this.isShow_drawer = false
      }
      // this.isShow_drawer_detail = true
      console.log(drawer, 'drawer');
    },

    // 订单数据验证
    order_verify() {
      let verify = true
      let isPass_basic = false
      let isPass_room = false
      let isPass_consume = false
      let isPass_pay = false

      //  基本信息部分
      for (const key in this.drawer_basic_data) {
        if (key.indexOf('True') == -1) {
          if (this.drawer_basic_data[key]) {
            this.drawer_basic_data[`${key}True`] = true
          } else {
            this.drawer_basic_data[`${key}True`] = false
            this.$message.warning('请完整填写基本信息!');
            isPass_basic = true
          }
          if (isPass_basic) {
            return verify = false
          }
        }
        if (key == 'phone' && this.drawer_basic_data[key].length != 11) {
          this.drawer_basic_data[`${key}True`] = true
          this.$message.warning('请填写正确的手机号码!');
          isPass_basic = true
        }
        if (isPass_basic) {
          return verify = false
        }
      }

      if (isPass_basic) {
        return verify = false
      }
      // 房间信息部分
      this.drawer_room_data.forEach(item => {
        if (item.room_id) {
          item.isTrue = true
        } else {
          item.isTrue = false
          this.$message.warning('请选择房间!');
          isPass_room = true
        }
      })
      if (isPass_room) {
        return verify = false

      }
      // 消费信息部分
      this.drawer_consumption_data.forEach(item => {
        if (item.consum_item.id && item.consum_item.price) {
          item.isTrue = true
        } else {
          item.isTrue = false
          isPass_consume = true
          if (item.consum_item.id && !item.consum_item.price) {
            this.$message.warning('请填写金额!');
          } else {
            this.$message.warning('请完整填写消费信息!');
          }
        }
      })
      if (isPass_consume) {
        return verify = false

      }
      // 收款信息部分
      this.drawer_collection_data.forEach(item => {
        if (item.type && item.pay_type && item.price) {
          item.isTrue = true
        } else {
          item.isTrue = false
          isPass_pay = true
          if (item.type && item.pay_type && !item.price) {
            this.$message.warning('请填写金额!');
          } else {
            this.$message.warning('请完整填写收款信息!');
          }
        }
      })
      if (isPass_pay) {
        return verify = false

      }
      return verify
    },

    /**
    * 删除方法====公共
    * @param {*} index 删除的数据下标
    * @param {*} data 删除的数据所在数组
    * @param {*} name 数组名
    */
    deleteData(index, data, name) {
      if (name == 'drawer_room_data') {//房间信息必须有一条数据
        if (data.length == 1) {
          this.$message.warning('必须保留一个房间信息！');
          return
        }
      }
      data = data.splice(index, 1)
    },

    //切换房型  0全日房，1钟点房
    change_select_room() {
      this.operation_room_arr = []
      this.drawer_room_data = []

      // this.drawer_room_data.forEach(item => {
      //   let row = {
      //     room: {
      //       id: item.room_id
      //     }
      //   }
      //   this.click_room_info(row, item.date)
      //   this.operation_room_arr = []
      //   this.drawer_room_data = []
      // })
      let arr = []
      if (this.select_room == 0) {
        this.select_room = 1
        this.getAllRoom().then(res => {
          arr = [{
            date: this.setTime(new Date()),//入住日期
            days: 4,//入住小时
            room_id: null,//房间id
            price: 0,
            people: [],
            isTrue: true,
            room_options: res
          }]
          this.drawer_room_data = arr
          // this.hour_room_data = arr
        })
      } else {
        this.select_room = 0
      }
    },

    // 获取选中日期当日的所有房间
    getAllRoom(getallroom) {
      let roomdata = []

      let allRoom = {//如果沒有传数据，则使用默认的
        hotel_id: this.hotel_id,
        is_hour_room: this.select_room == 0 ? 0 : 1,//0全日房 1 钟点房
        date: this.formatDate(new Date())//入住日期 
      }
      if (getallroom) {//传了数据使用数据
        allRoom = getallroom
      }

      // console.log(allRoom, '获取选中日期当日的所有房间');
      return this.my_request('supplier/hotel-pms-order/room-num', allRoom, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          roomdata = data.map((item) => ({
            value: item.id,
            label: item.pms_title,
            children: item.room_num_list.map((room) => {
              room.is_use = room.is_use == 0 ? false : true //0表示未占用，可以选择=false(不禁用)
              return ({
                value: room.id,
                label: room.room_num,
                disabled: room.is_use
              })
            })
          }))
          return roomdata
        }
      })
    },

    //获取消费项列表--填写订单内的消费信息
    getConsumeList() {
      this.consumeOptions = []
      let consume_data = {
        hotel_id: this.hotel_id
      }
      this.my_request('supplier/hotel-pms-consume', consume_data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          this.consumeOptions = data.list
        }
        // console.log(this.consumeOptions, '获取消费项目');
      })
    },
    //获取收款方式列表--填写订单内的收款信息
    getPayChannelList() {
      let payChannel_data = {
        hotel_id: this.hotel_id
      }
      this.my_request('supplier/config/hotel/room/pms', payChannel_data, 'GET').then(res => {
        // console.log(res, '获取收款方式列表');
        let { code, data } = res.data
        if (200 == code) {
          // this.consumeOptions = data.list
          // console.log(data, '获取收款方式列表');
        }
      })
    },
    //获取指定房间日期的价格
    getAppointRoomPrice(data) {
      let book_price = null
      return this.my_request('supplier/hotel-pms/book-price', data, 'GET').then(res => {
        let { code, data } = res.data
        if (200 == code) {
          book_price = data.book_price
          // console.log(book_price, '获取指定房间日期的价格');
          return book_price
        }
      })

    },

    /**
    * back 返回
    */
    back() {
      console.log("点击了返回");
      if (this.fill_order_title_show == 2 || this.innerDrawer == false || this.isShow_drawer == true) {
        this.isShow_drawer = false
        return
      }
      this.innerDrawer = false

    },


    /**
     * 选中房间信息发生变化触发
     * 重新获取房间价格
     * @param {*} room 当前房间信息发生变化的数据
     * 
     */
    async room_info_Change(room) {
      let num = room && this.getHouseId(room.room_id) ? this.getHouseId(room.room_id) : null
      let room_date = {
        room_id: num,
        start_date: room.date,
        day: room.days,
      }
      console.log(room, '选中房间信息发生变化触发');
      if (room_date.room_id && room_date.start_date && room_date.day && this.select_room == 0) {//全日房
        await this.getAppointRoomPrice(room_date).then(res => {
          console.log(res, '全日房');
          room.price = res
        })
        // supplier/hotel-pms-order/hour-room
      } else if (room_date.room_id && room_date.start_date && room_date.day && this.select_room == 1) {//钟点房
        let room_date_hours = {
          room_id: this.getHouseId(room.room_id),
        }
        await this.my_request('supplier/hotel-pms-order/hour-room', room_date_hours, 'GET').then(res => {
          console.log(res.data.data[0].price, '钟点房');
          let { code, data } = res.data
          if (200 == code) {
            room.price = data[0].price
            console.log(data, 'room_date_hours');
          }
        })
      }
    },

    /**
    * 根据房间id获取房型id
    * @param {*} id 房间id
    * @param {*} bool true--获取房间和房型名
    */
    getHouseId(id, bool) {
      let house_id = null
      let house_name = []
      this.roomOptions.forEach(item => {
        item.children.forEach(items => {
          if (items.value == id) {
            house_id = item.value
            house_name[0] = items.label
            house_name[1] = item.label
            return
          }
        })
      })
      if (bool) {
        return house_name
      } else {
        return house_id
      }
    },
    /**
    * 添加房间
    */
    addroom() {
      if (this.select_room == 0) {
        this.getAllRoom().then(res => {
          this.drawer_room_data.push({
            date: this.formatDate(new Date()),//入住日期
            days: 1,//入住天数
            room_id: null,//房间id
            price: 0,
            people: [],
            isTrue: true,
            room_options: res
          })
        })

        console.log(this.drawer_room_data, 'drawer_room_data');
      } else {
        this.getAllRoom().then(res => {
          this.drawer_room_data.push({
            id: this.drawer_room_data.length + 1,
            date: this.setTime(new Date()),//入住日期
            days: 4,//入住小时
            room_id: null,//房间id
            price: 0,
            people: [],
            isTrue: true,
            room_options: res
          })
        })
        console.log(this.drawer_room_data, 'drawer_room_data');
      }
    },
    /**
     * 入住人
     * @param {*} item 当前点击的入住人行--房间信息和入住人信息
     */
    occupant(item, index, drawer) {
      if ('order' == drawer) {
        // this.selected_checkIn_person_data = item
        this.selected_checkIn_person_data.date = item.date
        this.selected_checkIn_person_data.days = item.days
        this.selected_checkIn_person_data.price = item.price
        this.selected_checkIn_person_data.room = this.getHouseId(item.room_id, true)
        // this.selected_checkIn_person_room = this.getHouseId(item.room_id, true)
      } else if ('detail' == drawer) {
        this.selected_checkIn_person_data.date = item.date.split("至")[0]
        this.selected_checkIn_person_data.days = item.date.substring(item.date.indexOf("，") + 1, item.date.indexOf("晚"))
        this.selected_checkIn_person_data.price = item.price
        this.selected_checkIn_person_data.room = this.getHouseId(item.room_num_id, true)
        // this.selected_checkIn_person_room = this.getHouseId(item.room_num_id, true)
      }
      if (item.people.length > 0) {
        this.checkIn_person_list = item.people
      } else {
        this.checkIn_person_list = [
          {
            name: null,
            phone: null,
            card_type: 0,
            card_no: null,
            isTrue: true,
          }
        ]
      }
      this.selsect_item_index = index//当前操作的入住人信息的下标
      this.innerDrawer_title = '入住人信息'
      this.isShow_innerDrawer = 1
      this.innerDrawer = true
    },
    /**
     *添加入住人
     */
    addOccupant() {
      this.checkIn_person_list.push({
        name: null,
        phone: null,
        card_no: null,
        card_type: 0,
        isTrue: true,//用于判断是否填写姓名，加边框
      })
    },

    /**
     * 确认添加入住人
     * @param {*} data 修改的入住人信息的房间数据
     * @param {*} name 操作的抽屉
     */
    subOccupant(data, name) {
      let hasEmptyName = false;//检查是否有未填写姓名的数据
      this.checkIn_person_list.forEach(person => {
        if (!person.name) {
          person.isTrue = false
          hasEmptyName = true;
        } else {
          person.isTrue = true
        }
      })

      if (hasEmptyName) {
        this.$message.warning('请填写入住人姓名!');
        return
      }
      data[this.selsect_item_index].people = cloneDeep(this.checkIn_person_list)

      if ('detail' == name) {
        let add_data = {
          order_room_id: data[this.selsect_item_index].id,
          people: data[this.selsect_item_index].people
        }
        console.log(add_data, 'add_data');
        this.my_request('supplier/hotel-pms/people', add_data, "PUT").then(res => {
          console.log(res);
          let { code } = res.data
          if (200 == code) {
            this.get_order_detail()
            this.$message.success('成功添加入住人!');
          } else {
            this.$message.error('添加入住人失败!');
          }


        })
      }

      this.innerDrawer = false
      this.checkIn_person_list = [{
        name: null,
        phone: null,
        card_type: 0,
        card_no: null,
        isTrue: true,
      }]
    },
    /**
     *内层取消按钮
     */
    cancell_innerDrawer() {
      this.checkIn_person_list = [{
        name: null,
        phone: null,
        card_type: 0,
        card_no: null
      }]
      this.innerDrawer = false
    },

    /**
     * 添加消费
     */
    addConsume() {
      this.drawer_consumption_data.push({
        consum_item: {
          id: null,//消费项目id
          name: null,
          price: 0,//消费项目价格
          status: null,//消费项目是否启动
          type_id: null,
        },//消费项目信息
        date: this.formatDate(new Date()),//消费日期
        num: 1,//消费项目数量
        id: this.drawer_consumption_data.length + 1,
        remarks: null,//备注
        total_price: 0,//总价格
        isTrue: true
      })
      // console.log(this.drawer_consumption_data, 'drawer_consumption_data');
    },
    /**
     * 
     * @param {*} consum 当前选中消费项目发生变化的数据
     * @param {*} name 改变的数据名
     */
    consum_info_Change(consum, name) {
      this.consumeOptions.forEach(item => {
        if ('consum_form' == name) {
          consum.price = (parseFloat(item.price) * consum.num).toFixed(2)
          consum.name = item.name
        } else {
          if (item.id == consum.consum_item.id) {
            consum.consum_item = item
            consum.total_price = (parseFloat(consum.consum_item.price) * consum.num).toFixed(2)
          }
        }

      })
    },
    /**
     * 添加收款
     */
    addCollect() {
      this.drawer_collection_data.push(
        {
          id: this.drawer_collection_data.length + 1,
          price: null,
          type: 3,//3收款，5收押金
          pay_type: null,
          date: this.formatDate(new Date()),//入住日期
          remarks: null,//备注
          isTrue: true
        },
      )
      console.log(this.drawer_collection_data, 'drawer_collection_data');
    },
    /**
     * 添加提醒
     * @param {obj} item 获取到的当前的提醒信息 有item代表是t修改，没有则是添加
     */

    addReminder(item) {
      // console.log(operate, 'addReminder');
      if (item) {
        this.innerDrawer_title = '修改提醒'
        // console.log(item.id,'edit',this.selected_remind_data);
        this.selected_remind_data.reminder_time = item.reminder_time ? item.reminder_time : item.date
        this.selected_remind_data.content = item.content
        this.selected_remind_data.id = item.id//编辑则添加id
      } else {
        this.innerDrawer_title = '添加提醒'
        // console.log('add',this.selected_remind_data);
        this.selected_remind_data.reminder_time = this.formatDate(new Date(), 1)
        this.selected_remind_data.content = null
        this.selected_remind_data.id = null//添加没有id
      }
      this.isShow_innerDrawer = 2
      this.innerDrawer = true
    },
    /**
     * 删除提醒
     * @param {*} id 删除的提醒id
     */
    deleteReminder(id) {
      console.log(id, 'deleteReminder');
      let data = {
        id,
      }
      console.log(id);
      this.my_request('supplier/hotel-pms-reminder', data, 'DELETE').then(res => {
        console.log(res, 'del');
        if (200 == res.data.code) {
          this.get_order_detail()
          this.innerDrawer = false
          this.$message.success('删除成功');
        }
      })
    },
    /**
     * 内层添加提醒表单----确认添加提醒
     * @param {*} formName 表单名称
     * @param {*} operate 操作
     */
    submitForm(formName, operate) {
      /**
       * 切换退款或收款时，重置表单验证
       */
      if (formName == 'collectionForm' && operate == 'changecollectionForm') {
        this.$refs[formName].resetFields();
        this.cancellation_data.add_collection.is_refund = !this.cancellation_data.add_collection.is_refund
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {//表单信息正确时，则 添加到/编辑 数组，并且返回上一级抽屉
          // console.log(this.selected_remind_data, 'selected_remind_data');

          // 内层添加消费
          if ('consumForm' == formName) {
            console.log(valid, this.cancellation_data.consum_form, 'consumForm');
            let consumeData = {
              order_id: this.order_id,
              name: this.cancellation_data.consum_form.name,
              num: this.cancellation_data.consum_form.num,
              money: this.cancellation_data.consum_form.price,
              remarks: this.cancellation_data.consum_form.remarks
            }
            this.my_request('supplier/hotel-pms/consume', consumeData, "POST").then(res => {
              let { code, message } = res.data
              if (200 == code) {
                this.get_order_detail()//重新获取订单详情
                this.getRoomStatus()
                this.tablekey = !this.tablekey//刷新table数据
                this.$message.success(message)
                this.innerDrawer = false
              } else {
                this.$message.error('添加失败')
              }
            })
            return
          }
          // 内层添加收款
          //  add_collection
          if ('collectionForm' == formName) {
            let collectionData = {
              order_id: this.order_id,
              type: this.cancellation_data.add_collection.item,
              pay_type: this.cancellation_data.add_collection.pay_type,
              date: this.cancellation_data.add_collection.date,
              money: this.cancellation_data.add_collection.price,
              remarks: this.cancellation_data.add_collection.remarks
            }
            console.log(collectionData, 'collectionData');
            this.my_request('supplier/hotel-pms/cash', collectionData, "POST").then(res => {
              console.log(res, '内层添加收款');
              let { code, message } = res.data
              if (200 == code) {
                this.get_order_detail()//重新获取订单详情
                this.getRoomChannels()
                this.tablekey = !this.tablekey//刷新table数据
                this.innerDrawer = false
                if (collectionData == 3 || collectionData == 5) {
                  this.$message.success(message)
                } else {
                  this.$message.success('添加退款成功')
                }

              } else {
                this.$message.error('添加失败')
              }
            })
            return
          }


          // 添加/编辑 提醒
          /**
           * 订单详情调用接口
           * 填写订单不调用
           */
          if (this.selected_remind_data.id) {//有id是编辑
            if ('detail' == operate) {
              console.log('有id是编辑,订单详情');
              let data = {
                id: this.selected_remind_data.id,
                reminder_time: this.selected_remind_data.reminder_time,
                content: this.selected_remind_data.content,
              }
              this.my_request('supplier/hotel-pms-reminder', data, 'PUT').then(res => {
                let { code } = res.data
                if (200 == code) {
                  this.get_order_detail()
                  this.innerDrawer = false
                  this.$message.success('修改成功');
                }
              })
              return
            } else {
              console.log('有id是编辑,填写订单');
              this.drawer_reminder_data.forEach(element => {
                if (element.id == this.selected_remind_data.id) {
                  element.content = this.selected_remind_data.content
                  element.reminder_time = this.selected_remind_data.reminder_time
                }
                this.innerDrawer = false
              });
              return
            }
          } else {//无id是添加
            if ('detail' == operate) {
              console.log('无id是添加,订单详情');
              let data = {
                order_id: this.order_id,
                reminder_time: this.selected_remind_data.reminder_time,
                content: this.selected_remind_data.content,
                hotel_id: this.hotel_id,
              }
              this.my_request('supplier/hotel-pms/reminder', data, 'POST').then(res => {
                let { code, message } = res.data
                if (200 == code) {
                  this.get_order_detail()
                  this.innerDrawer = false
                  this.$message.success(message);
                }
              })
              return
            } else {
              // console.log('无id是添加,填写订单');
              this.drawer_reminder_data.push({
                id: generateRandomID(),
                reminder_time: this.selected_remind_data.reminder_time,
                content: this.selected_remind_data.content
              })
              this.innerDrawer = false
              return
            }
          }
        } else {
          console.log(valid, this.cancellation_data.consum_form, 'consumForm');
          return false;
        }
      });
    },






    /**
    * 2021-11-22格式转11-22格式
    * @param {*} val 2021-11-22
    * @param {bool} isDiagonal 是否斜杠
    */
    handleDate(val, isDiagonal) {
      if (val) {
        val = val.substring(5)
        if (isDiagonal) {
          val = val.replace('-', '/')
        }
        return val
      }
    },

    /**
     * 转换周*
     * @param {*} val 
     */
    handlweek(val) {
      let week = ''
      val = new Date(val).getDay()
      switch (val) {
        case 0:
          week = "日"
          break;
        case 1:
          week = "一"
          break;
        case 2:
          week = "二"
          break;
        case 3:
          week = "三"
          break;
        case 4:
          week = "四"
          break;
        case 5:
          week = "五"
          break;
        case 6:
          week = "六"
          break;
      }
      return week
    },
    /**
    * 转换成字符串格式
    * @param {*} date 
    * @param {*} key true返回MM-dd
    */
    formatDate(date, key) {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0');
      let day = String(date.getDate()).padStart(2, '0');
      let hours = String(date.getHours()).padStart(2, '0');
      let minutes = String(date.getMinutes()).padStart(2, '0');
      let seconds = String(date.getSeconds()).padStart(2, '0');

      if (key == 1) {
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } else if (key == 2) {
        return `${month}-${day} ${hours}:${minutes}`;
      } else {
        return `${year}-${month}-${day}`;
      }
    },
    /**
     * 返回当前事件num小时后的时间
     * @param {*} date 当前时间
     * @param {*} num 定义要加的小时数
     */
    countHours(date, num) {
      date = new Date(date);

      // 加上 num 个小时
      date.setHours(date.getHours() + num);

      // 格式化日期为 "mm-dd HH-mm" 的字符串
      let formatted_date = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;

      // console.log(formatted_date); // 输出结果：08-07 12-00
      return formatted_date
    },
    setTime(date) {
      // 设置小时、分钟和秒钟为0
      const currentDate = new Date(date);
      currentDate.setHours(0);
      currentDate.setMinutes(0);
      currentDate.setSeconds(0);
      currentDate.setMilliseconds(0);
      return currentDate
    }
  },


}
</script>

<style lang="scss" scoped src="./RoomCalendar.scss"></style>